import { Label } from "../../atoms/label/index";
import { Input, type InputProps } from "../../atoms/input/index";
import { cn } from "../../lib/utils";

export interface FormFieldProps extends InputProps {
  label: string;
  error?: string;
  description?: string;
}

export function FormField({
  label,
  error,
  description,
  className,
  id,
  ...inputProps
}: FormFieldProps) {
  const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");

  return (
    <div className={cn("space-y-2", className)}>
      <Label htmlFor={fieldId}>{label}</Label>
      <Input id={fieldId} {...inputProps} />
      {description && (
        <p className="text-sm text-muted-foreground">{description}</p>
      )}
      {error && <p className="text-sm text-destructive">{error}</p>}
    </div>
  );
}
