/**
 * ColorPicker Component
 *
 * Color input with text field for hex values.
 */

interface ColorPickerProps {
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
  className?: string;
  /** Use compact size for floating panels */
  size?: "default" | "compact";
  /** Show text input alongside color picker */
  showInput?: boolean;
}

export function ColorPicker({
  value,
  onChange,
  disabled = false,
  className = "",
  size = "default",
  showInput = true,
}: ColorPickerProps) {
  const pickerClass =
    size === "compact"
      ? "floating-settings__color-picker"
      : "settings-color-picker";

  const inputClass =
    size === "compact" ? "floating-popover__input" : "settings-input";

  const containerClass =
    size === "compact"
      ? "floating-popover__color-input"
      : "settings-color-input";

  // Handle transparent value
  const displayValue = value === "transparent" ? "#ffffff" : value;

  return (
    <div className={`${containerClass} ${className}`}>
      <input
        type="color"
        className={pickerClass}
        value={displayValue}
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
      />
      {showInput && (
        <input
          type="text"
          className={`${inputClass} flex-1`}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder="#000000"
          disabled={disabled}
        />
      )}
    </div>
  );
}

export default ColorPicker;
