// components/form/FormField.tsx
import { Input } from "@/shared/common/ui/input";
import { Label } from "@/shared/common/ui/label";
import { cn } from "@/shared/lib/utils";
import { ComponentProps } from "react";

type FormFieldProps = {
  label?: string;
  error?: string;
  containerClassName?: string;
} & ComponentProps<typeof Input>;

export function FormFeild({
  label,
  error,
  containerClassName,
  className,
  ...props
}: FormFieldProps) {
  return (
    <div className={cn("space-y-2", containerClassName)}>
      {label && <Label htmlFor={props.id} className="dark:text-gray-300">{label}</Label>}
      <Input
        className={cn(error && "border-destructive", className, "dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500")}
        {...props}
      />
      {error && <p className="text-xs text-destructive mt-1">{error}</p>}
    </div>
  );
}
