import * as React from 'react';
import { cn } from '@/lib/utils';

/**
 * TextareaProps - Propriétés du composant Textarea
 *
 * @interface TextareaProps
 * @extends React.TextareaHTMLAttributes<HTMLTextAreaElement>
 */
export interface TextareaProps
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  /**
   * Label à afficher au-dessus du champ de texte
   *
   * @example
   * ```tsx
   * <Textarea label="Description" />
   * ```
   */
  label?: string;

  /**
   * Message d'erreur à afficher sous le champ
   * Si fourni, la bordure devient rouge et le message s'affiche
   *
   * @example
   * ```tsx
   * <Textarea
   *   error={errors.description}
   *   label="Description"
   * />
   * ```
   */
  error?: string;
}

/**
 * Textarea - Composant de zone de texte avec design system Kodo
 *
 * Composant de zone de texte multiligne avec support pour les labels et les messages d'erreur.
 * Utilise le design system Kodo avec des styles cohérents et une hauteur minimale de 100px.
 *
 * @example
 * ```tsx
 * // Textarea simple
 * <Textarea placeholder="Entrez votre message..." />
 *
 * // Textarea avec label
 * <Textarea label="Description" placeholder="Décrivez..." />
 *
 * // Textarea avec validation d'erreur
 * <Textarea
 *   label="Commentaire"
 *   error={errors.comment}
 *   value={comment}
 *   onChange={(e) => setComment(e.target.value)}
 * />
 *
 * // Textarea contrôlée
 * <Textarea
 *   value={value}
 *   onChange={(e) => setValue(e.target.value)}
 *   rows={5}
 * />
 * ```
 *
 * @component
 * @param {TextareaProps} props - Propriétés du composant
 * @returns {JSX.Element} Élément textarea stylisé avec label et erreur optionnels
 */

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ label, error, className, ...props }, ref) => {
    return (
      <div className="w-full">
        {label && (
          <label className="block text-sm font-medium text-muted-foreground mb-2 font-body">
            {label}
          </label>
        )}
        <textarea
          ref={ref}
          className={cn(
            'w-full px-4 py-4',
            'bg-kodo-graphite border',
            error ? 'border-kodo-red' : 'border-border',
            'text-white placeholder-gray-500',
            'font-body text-base',
            'rounded-lg',
            'focus:outline-none focus:border-border focus:ring-1 focus:ring-kodo-steel',
            'transition-all duration-[var(--duration-fast)]',
            'min-h-[100px] resize-y',
            className,
          )}
          {...props}
        />
        {error && <p className="mt-1 text-xs text-kodo-red">{error}</p>}
      </div>
    );
  },
);
Textarea.displayName = 'Textarea';

export { Textarea };