Untitled

import React from 'react';

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

const OwnerInformationForm: React.FC = () => {
  const formFields: FormField[] = [
    { label: "Nome", id: "nome", type: "text" },
    { label: "Cognome", id: "cognome", type: "text" },
    { label: "Codice Fiscale", id: "cf", type: "text" },
    { label: "Email", id: "email", type: "email" },
    { label: "Provincia", id: "provincia", type: "text" },
    { label: "Città", id: "citta", type: "text" },
  ];

  const formFieldShort: FormField[] = [
    { label: "Via", id: "via", type: "text" },
    { label: "Numero civico", id: "Ncivico", type: "text" },
    { label: "CAP", id: "cap", type: "text" },
  ];

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

      {formFields.map(({ label, id, type }) => (
        <div key={id} className="flex flex-wrap gap-4">
          <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] w-[250px]">
            <input
              type={type}
              id={id}
              className="w-full h-full px-4 rounded-3xl"
              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-2xl 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-3xl"
                aria-label={label}
              />
            </div>
          </div>
        ))}
      </div>

      <div className="col-span-2 mt-6">
        <span className="block text-lg text-black">Sei tu il proprietario?</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 OwnerInformationForm;