Color Picker

'use client';

import { useEffect, useRef } from 'react';
import './ColorPickerInput.css';

/**
 * ColorPickerInput — A specialized input for selecting hex colors with a circular preview.
 * 
 * @param {string} label - Input labeling title.
 * @param {string} id - HTML ID for the picker.
 * @param {string} value - Default starting color value (hex). Default is '#6366f1'.
 * @param {string} name - HTML name binding.
 */
export interface ColorPickerInputProps {
  label: string;
  id: string;
  value?: string;
  name?: string;
}

export function ColorPickerInput({ label, id, value = "#6366f1", name }: ColorPickerInputProps) {

  // Ported from the Astro <script>: runs once after mount (DOM logic kept as in the Astro kit).
  const mounted = useRef(false);
  useEffect(() => {
    if (mounted.current) return;
    mounted.current = true;
    document.querySelectorAll('.color-input').forEach(input => {
        const parent = input.closest('.color-picker-wrap');
        const display = parent?.querySelector('[data-color-value]');
        input.addEventListener('input', (e) => {
          if (display) display.textContent = (e.target as HTMLInputElement).value;
        });
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      <div className="color-picker-wrap" data-rk-e8d0de="">
        <div className="color-input-container" data-rk-e8d0de="">
          <input type="color" className="color-input" id={id} name={name} defaultValue={value} data-rk-e8d0de="" />
          <label htmlFor={id} className="color-label" data-rk-e8d0de="">{label}</label>
        </div>
        <span className="color-value" data-color-value data-rk-e8d0de="">{value}</span>
      </div>
    </>
  );
}

export default ColorPickerInput;

/* ColorPickerInput — ported from astro-component-kit (forms/ColorPickerInput.astro) */

.color-picker-wrap:where([data-rk-e8d0de]) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--c-bg-elev, rgba(255,255,255,0.03)); padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem); border-radius: var(--r-md, 12px); border: 1px solid var(--c-border, rgba(255,255,255,0.1)); }
.color-input-container:where([data-rk-e8d0de]) { display: flex; align-items: center; gap: 1rem; }

.color-input:where([data-rk-e8d0de]) { 
  -webkit-appearance: none; 
  border: none; 
  width: 38px; height: 38px; 
  border-radius: var(--r-full, 50%); 
  cursor: pointer; 
  background: transparent;
  padding: 0;
}
.color-input:where([data-rk-e8d0de])::-webkit-color-swatch-wrapper { padding: 0; }
.color-input:where([data-rk-e8d0de])::-webkit-color-swatch { 
  border: 2px solid rgba(255,255,255,0.2); 
  border-radius: 50%; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.color-label:where([data-rk-e8d0de]) { font-size: 0.9rem; color: var(--c-text-1, #e2e8f0); font-weight: 500; cursor: pointer; }
.color-value:where([data-rk-e8d0de]) { font-size: 0.8rem; color: var(--c-text-2, #64748b); font-family: monospace; text-transform: uppercase; letter-spacing: 0.05em; }