import type { FC, TextareaHTMLAttributes } from 'react';
import { cn } from '../../lib/utils';

interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
  label?: string;
  error?: string;
}

export const TextArea: FC<TextAreaProps> = ({ label, error, className, id, ...props }) => {
  const areaId = id ?? (label ? `textarea-${label.replace(/\s+/g, '-').toLowerCase()}` : undefined);
  return (
    <div className={cn('w-full', className)}>
      {label && (
        <label htmlFor={areaId} className="block text-xs font-medium text-[#7A5C44] mb-1.5">
          {label}
        </label>
      )}
      <textarea
        id={areaId}
        className={cn(
          'w-full rounded-xl border bg-homenest-cream-light px-3 py-2.5 text-sm text-homenest-bark placeholder:text-[#A87B5D] focus:outline-none focus:ring-2 focus:ring-[#8B5E3C]/30 focus:border-[#3E2C1C] transition resize-y min-h-[80px]',
          error ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/20' : 'border-[#E9D5B7]'
        )}
        {...props}
      />
      {error && <p className="mt-1.5 text-xs text-rose-600">{error}</p>}
    </div>
  );
};

export default TextArea;