import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
export function FormField({
  label,
  className,
  ...props
}: React.ComponentProps<typeof Input> & { label: string; className?: string }) {
  return (
    <div className={cn("min-w-0", className)}>
      <label className="field-label" htmlFor={props.id ?? props.name}>
        {label}
        {props.required && <span className="text-destructive"> *</span>}
      </label>
      <Input id={props.id ?? props.name} {...props} />
    </div>
  );
}
export function SelectField({
  label,
  options,
  className,
  ...props
}: React.ComponentProps<"select"> & {
  label: string;
  options: readonly (string | { value: string; label: string })[];
  className?: string;
}) {
  return (
    <div className={className}>
      <label className="field-label" htmlFor={props.id ?? props.name}>
        {label}
        {props.required && <span className="text-destructive"> *</span>}
      </label>
      <select
        id={props.id ?? props.name}
        {...props}
        className="h-11 w-full rounded-lg border border-input bg-card px-3 outline-none focus:border-primary"
      >
        {options.map((option) =>
          typeof option === "string" ? (
            <option key={option}>{option}</option>
          ) : (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ),
        )}
      </select>
    </div>
  );
}