import { TextareaHTMLAttributes, ReactNode, useState } from 'react';
import { FormFieldWrapper } from './FormFieldWrapper';

interface FormTextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
  id: string;
  label: string;
  icon?: ReactNode;
  error?: string;
}

export function FormTextarea({
  id,
  label,
  icon,
  error,
  value,
  disabled,
  ...rest
}: FormTextareaProps) {
  const [isFocused, setIsFocused] = useState(false);
  const isFilled = !!value;
  const hasError = !!error;

  return (
    <FormFieldWrapper
      id={id}
      label={label}
      icon={icon}
      error={error}
      isFilled={isFilled}
      isFocused={isFocused}
      disabled={disabled}
    >
      <textarea
        id={id}
        value={value}
        disabled={disabled}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        aria-describedby={hasError ? `${id}-error` : undefined}
        aria-invalid={hasError}
        className={`
          w-full px-3 py-3 pt-5 rounded-lg
          border-2 transition-colors duration-200
          bg-white resize-vertical
          ${icon ? 'pl-10' : ''}
          ${hasError
            ? 'border-puffin-error text-puffin-error placeholder-puffin-error/50'
            : isFocused
            ? 'border-puffin-blue-focus'
            : 'border-puffin-gray-border hover:border-gray-300'
          }
          ${disabled
            ? 'bg-puffin-gray-disabled cursor-not-allowed opacity-50'
            : ''
          }
          focus:outline-none
          text-gray-900 placeholder-transparent
        `}
        {...rest}
      />
    </FormFieldWrapper>
  );
}
