export const ColorInput = ({
  id,
  label,
  value,
  onChange,
}: {
  id: string;
  label: string;
  description?: string;
  placeholder?: string;
  value?: string;
  onChange: (value: string) => void;
}) => {
  const colorRef = useRef<HTMLInputElement>(null);
  const textRef = useRef<HTMLInputElement>(null);
  const handleInputClick = () => {
    colorRef?.current?.click();
  };
  return (
    <>
      <label htmlFor={id} className={FORM_LABEL_CLASSES}>
        {label}
      </label>
      <div className="flex relative items-center">
        <input
          ref={colorRef}
          id={id}
          type="color"
          value={value}
          className="absolute left-2 top-[6px] border"
          onChange={(e) => onChange(e.target.value)}
          onFocus={() => {
            textRef?.current?.focus();
            textRef?.current?.click();
          }}
        />
        <input
          ref={textRef}
          id={id}
          type="text"
          className={clsx(FORM_INPUT_CLASSES, "!pl-10")}
          value={value}
          onKeyDown={handleInputClick}
          onClick={handleInputClick}
          onChange={(e) => onChange(e.target.value)}
        />
      </div>
    </>
  );
};