interface FormFieldProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  error?: string;
}

export function FormField({ label, error, name, required, ...props }: FormFieldProps) {
  return (
    <div>
      <label
        htmlFor={name}
        className="mb-1.5 block text-[13px] font-semibold text-heading"
      >
        {label}
        {required && <span className="text-merah-ranata"> *</span>}
      </label>
      <input
        id={name}
        name={name}
        required={required}
        className={`w-full rounded-xl border px-4 py-2.5 text-sm text-heading bg-bg-light transition-all duration-150 placeholder:text-gray-400 hover:border-gray-300 focus:bg-white focus:border-merah-ranata focus:outline-none focus:ring-4 focus:ring-merah-ranata/10 ${
          error ? "border-red-300 bg-red-50/50" : "border-gray-200"
        }`}
        {...props}
      />
      {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
    </div>
  );
}

interface FormTextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  label: string;
  error?: string;
}

export function FormTextarea({
  label,
  error,
  name,
  required,
  ...props
}: FormTextareaProps) {
  return (
    <div>
      <label
        htmlFor={name}
        className="mb-1.5 block text-[13px] font-semibold text-heading"
      >
        {label}
        {required && <span className="text-merah-ranata"> *</span>}
      </label>
      <textarea
        id={name}
        name={name}
        required={required}
        className={`w-full rounded-xl border px-4 py-2.5 text-sm text-heading bg-bg-light transition-all duration-150 placeholder:text-gray-400 hover:border-gray-300 focus:bg-white focus:border-merah-ranata focus:outline-none focus:ring-4 focus:ring-merah-ranata/10 ${
          error ? "border-red-300 bg-red-50/50" : "border-gray-200"
        }`}
        {...props}
      />
      {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
    </div>
  );
}

interface FormCheckboxProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
}

export function FormCheckbox({ label, name, id, className, ...props }: FormCheckboxProps) {
  const inputId = id ?? name;
  return (
    <label
      htmlFor={inputId}
      className="flex items-center gap-3 rounded-xl border border-gray-200 bg-bg-light px-4 py-3 cursor-pointer transition-colors hover:border-gray-300 has-[:checked]:border-merah-ranata/30 has-[:checked]:bg-red-50/60"
    >
      <input
        id={inputId}
        name={name}
        type="checkbox"
        className="h-4 w-4 shrink-0 rounded border-gray-300 text-merah-ranata focus:ring-merah-ranata/30"
        {...props}
      />
      <span className="text-sm font-medium text-heading select-none">{label}</span>
    </label>
  );
}