/* eslint-disable @typescript-eslint/no-explicit-any */
import { PaintBucketIcon } from '@phosphor-icons/react';
import { FieldLabel } from '@puckeditor/core';

const ColorPicker = (props: {
  name: string;
  field: any;
  onChange: (value: any) => void;
  value: any;
}) => {
  const { name, field, onChange, value } = props;

  const safeValue = value || '#000000';

  return (
    <>
      <FieldLabel icon={<PaintBucketIcon />} label={field.label} />

      <input
        type="color"
        id={name}
        value={safeValue}
        onChange={(e) => onChange(e.target.value)}
        className="h-10 w-full cursor-pointer rounded-md border-2 border-transparent p-0"
      />
    </>
  );
};

export default ColorPicker;