import { ReactNode } from "react";

interface FormFieldProps {
  label: string;
  required?: boolean;
  error?: string;
  children: ReactNode;
}

export const FormField = ({
  label,
  required = false,
  error,
  children,
}: FormFieldProps) => {
  return (
    <div className="flex flex-col gap-2">
      <p className="text-R14">
        {label}
        {required && <span className="text-red-500"> *</span>}
      </p>
      {children}
      {error && <p className="text-red-500 text-R12 mt-1">{error}</p>}
    </div>
  );
};