import TextInput from "./TextInput";
import TextareaInput from "./TextAreaInput";
import type { FieldConfig, FormErrors, FormValues } from "./types";

const colClasses: Record<number, string> = {
  1: "md:grid-cols-1",
  2: "md:grid-cols-2",
  3: "md:grid-cols-3",
  4: "md:grid-cols-4",
};

export default function InputGroup({
  fields,
  formData,
  onChange,
  cols = 1,
  formError,
}: {
  fields: FieldConfig[];
  formData: FormValues;
  onChange: (value: string, name: string) => void;
  cols?: 1 | 2 | 3 | 4;
  formError?: FormErrors;
}) {
  return (
    <div className={`grid grid-cols-1 ${colClasses[cols] || "md:grid-cols-1"} gap-4 md:gap-6`}>
      {fields.map((field, idx) => {
        const error = formError?.[field.name];

        switch (field.type) {
          case "text":
          case "email":
            return <TextInput key={idx} {...field} value={formData[field.name]} onChange={(value: string) => onChange(value, field.name)} isError={!!error} textFoot={error} />;
          case "textarea":
            return <TextareaInput key={idx} {...field} value={formData[field.name]} onChange={(value: string) => onChange(value, field.name)} isError={!!error} textFoot={error} />;
          default:
            return null;
        }
      })}
    </div>
  );
}