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

type FieldProps = {
  id?: string;
  label: React.ReactNode;
  required?: boolean;
  hint?: React.ReactNode;
  error?: React.ReactNode;
  trailingLabel?: React.ReactNode;
  className?: string;
  children: React.ReactNode;
};

/**
 * Field : wrapper standardisé label + champ + hint/erreur.
 * À utiliser avec Input, Textarea, Select.
 */
export function Field({ id, label, required, hint, error, trailingLabel, className, children }: FieldProps) {
  const hintId = id ? `${id}-hint` : undefined;
  const errorId = id ? `${id}-error` : undefined;
  const describedBy = [error ? errorId : null, hint ? hintId : null].filter(Boolean).join(" ") || undefined;

  return (
    <div className={cn("space-y-1.5", className)}>
      <div className="flex items-center justify-between gap-2">
        <label
          htmlFor={id}
          className="text-xxs uppercase tracking-wider font-semibold text-text-dim flex items-center gap-1.5"
        >
          <span>{label}</span>
          {required && (
            <span className="text-accent normal-case tracking-normal text-[9px]" aria-hidden>
              obligatoire
            </span>
          )}
        </label>
        {trailingLabel}
      </div>
      {/* On clone l'enfant pour propager aria-describedby et required si applicable */}
      {React.isValidElement(children)
        ? React.cloneElement(children as React.ReactElement<{
            id?: string;
            required?: boolean;
            "aria-describedby"?: string;
          }>, {
            id,
            required,
            "aria-describedby": describedBy,
          })
        : children}
      {hint && !error && (
        <p id={hintId} className="text-xs text-text-faint">
          {hint}
        </p>
      )}
      {error && (
        <p id={errorId} className="text-xs text-danger" role="alert">
          {error}
        </p>
      )}
    </div>
  );
}