"use client";
import React, { useState, useEffect } from "react";

type colorInput = {
  id: string;
  label: string;
  value?: string; // Optional value prop for initial color
  onChange: (color: string) => void;
};

export default function ColorPicker({ id, label, value, onChange }: colorInput) {
  const [color, setColor] = useState<string>(value || "#000000");

  useEffect(() => {
    if (value !== undefined && value !== color) {
      setColor(value);
    }
  }, [value, color]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newColor = e.target.value;
    setColor(newColor);
    onChange(newColor);
  };

  return (
    <div className="">
      <label
        htmlFor="colorInput"
        className="block text-xs font-medium capitalize"
      >
        {label}
      </label>
      <input
        type="color"
        id={id}
        value={color}
        onChange={handleChange}
        className="h-10 w-16 cursor-pointer border-none"
      />
      <p className="text-sm text-gray-700 uppercase font-medium">
        <span>{color}</span>
      </p>
    </div>
  );
}