import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { cn } from '@/lib/utils';
import { HTMLInputTypeAttribute } from 'react';

interface FormInputProps {
  label: string;
  name: string;
  type?: HTMLInputTypeAttribute;
  placeholder?: string;
  value?: string | null;
  required?: boolean;
  className?: string;
  isTextArea?: boolean;
  description?: string;
  accept?: string;
  disabled?: boolean;
  onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
}

export function FormInput({
  label,
  name,
  type = 'text',
  placeholder,
  value,
  required,
  className,
  isTextArea,
  description,
  accept,
  disabled = false,
  onChange,
}: FormInputProps) {
  const inputId = `input-${name}`;
  const descriptionId = `description-${name}`;

  return (
    <div className='space-y-2'>
      <div className='flex items-center justify-between'>
        <Label
          htmlFor={inputId}
          className={cn(
            'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
          )}
        >
          {label}
          {required && <span className='text-red-500 ml-1'>*</span>}
        </Label>
      </div>

      {description && (
        <p id={descriptionId} className='text-sm text-neutral-300'>
          {description}
        </p>
      )}

      {isTextArea ? (
        <Textarea
          id={inputId}
          name={name}
          placeholder={placeholder}
          value={value ?? ''}
          required={required}
          disabled={disabled}
          className={cn(
            'min-h-[100px] bg-neutral-200 border-neutral-300 placeholder:text-neutral-800 text-neutral-800',
            'focus:ring-2 focus:ring-blue-500 focus:border-transparent',
            'transition-colors duration-200',
            className
          )}
          aria-describedby={description ? descriptionId : undefined}
          onChange={onChange}
        />
      ) : (
        <Input
          id={inputId}
          name={name}
          type={type}
          placeholder={placeholder}
          value={value ?? ''}
          required={required}
          disabled={disabled}
          className={cn(
            'bg-neutral-200 border-neutral-300 text-neutral-800 rounded-md',
            'focus:ring-2 focus:ring-neutral-500 focus:border-transparent placeholder:text-neutral-500',
            'transition-colors duration-200',
            className
          )}
          aria-describedby={description ? descriptionId : undefined}
          accept={accept}
          onChange={onChange}
        />
      )}
    </div>
  );
}
