type SvgrComponent = React.FC<React.SVGProps<SVGSVGElement>>;
interface FormInputProps {
  id: string;
  Icon?: SvgrComponent;
   className?: string;
  required?: boolean;
  value: string;
  label: string;
  type: string;
  onChange: (value: string) => void;
}

const FormInput: React.FC<FormInputProps> = ({
  id,
  className,
  required = false,
  value,
  type,
  onChange,
  Icon,
  label
}) => {
  return (
    <div className='flex flex-col w-full'>
      <label htmlFor={id}>{label}</label>
      <div className='border-gray-400'>
        {Icon && <Icon />}
        <input
          required={required}
          className={`g-input ${className}`}
          type={type}
          name={id}
          id={id}
          value={value}
          onChange={e => onChange(e.target.value)}
        />
      </div>
    </div>
  );
};

export default FormInput;