import { Input } from '@/components/ui/input';

type ColorPickerProps = { value?: string; name: string; label?: string };
export const ColorPicker = (props: ColorPickerProps) => {
  const { value = '#000000', name, label } = props;
  return (
    <div style={{ borderWidth: '1px' }} className="relative w-full rounded">
      {label && <span className="text-muted-foreground absolute z-10 -mt-2 ml-5 bg-background px-2 text-xs">{label}</span>}
      <div className="flex items-center justify-between">
        <div className="h-12 overflow-hidden rounded-full p-0">
          <Input
            defaultValue={value}
            className="absolute h-12 w-24 rounded-full border-0 text-lg"
            type="color"
            name={name}
            placeholder="Font Weight"
          />
        </div>
        <div>
          <Input
            name={name}
            className="border-0 text-right text-base outline-none focus:outline-none"
            defaultValue={value}
          />
        </div>
      </div>
    </div>
  );
};
