Untitled

import React from 'react';

type FormField = {
  label: string;
  id: string;
  type: string;
};

const PetInformationForm: React.FC = () => {
  const formFields: FormField[] = [
    { label: "Name", id: "name", type: "text" },
    { label: "Età", id: "eta", type: "text" },
    { label: "Genere", id: "genere", type: "text" },
    { label: "Razza", id: "razza", type: "text" },
    { label: "Numero Microchip", id: "microchip", type: "text" },
  ];

  const formFieldShort: FormField[] = [
    { label: "Provincia", id: "provincia", type: "text" },
    { label: "Comune", id: "comune", type: "text" },
  ];

  return (
    <form className="grid grid-cols-2 gap-6">
      <div className="col-span-2">
        <h2 className="text-2xl font-bold text-black">Pet Information</h2>
      </div>

      {formFields.map(({ label, id, type }) => (
        <div key={id} className={`flex flex-wrap gap-4 ${id === "microchip" ? "col-span-2" : ""}`}>
          <label htmlFor={id} className="grow shrink my-auto w-[143px] text-4xl text-black">{label}</label>
          <div className={`flex shrink-0 max-w-full bg-white rounded-lg border border-black border-solid h-[45px] ${id === "microchip" ? "w-[500px]" : "w-[250px]"}`}>
            <input
              type={type}
              id={id}
              className={`w-full h-full px-4 rounded-lg ${id === "microchip" ? "w-full" : ""}`}
              aria-label={label}
            />
          </div>
        </div>
      ))}

      <div className="grid grid-cols-3 gap-6 col-span-2">
        {formFieldShort.map(({ label, id, type }) => (
          <div key={id} className="flex flex-col gap-2 h-[85px]">
            <label htmlFor={id} className="text-3xl text-black flex justify-center items-center">{label}</label>
            <div className="flex shrink-0 max-w-full bg-white rounded-lg border border-black border-solid h-[45px] w-[250px]">
              <input
                type={type}
                id={id}
                className="w-full h-full px-4 rounded-lg"
                aria-label={label}
              />
            </div>
          </div>
        ))}
      </div>

      <div className="col-span-2 mt-6">
        <span className="block text-lg text-black">Sterilizzato?</span>
        <div className="mt-2 flex gap-6 items-center">
          {["Sì", "No"].map((option) => (
            <div key={option} className="flex items-center">
              <input
                type="radio"
                id={`owner${option}`}
                name="owner"
                value={option.toLowerCase()}
                className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
              />
              <label htmlFor={`owner${option}`} className="ml-2 text-base text-black">{option}</label>
            </div>
          ))}
        </div>
      </div>
    </form>
  );
};

export default PetInformationForm;