import { getTitoloTranslation } from "~/lib/annuncio_details";
import CardAnnuncio from "~/components/annuncio_card";
import { useTranslation } from "~/providers/I18nProvider";
import type { AnnuncioRicerca } from "~/server/controllers/annunci.controller";

export const AnnunciGrid = ({ pagedata }: { pagedata: AnnuncioRicerca[] }) => {
  const { locale } = useTranslation();

  return (
    <div className="relative z-0 mx-auto grid max-w-7xl grid-flow-row grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {pagedata.map((annuncio) => (
        <CardAnnuncio
          id={annuncio.id}
          key={annuncio.codice}
          codice={annuncio.codice}
          prezzo={annuncio.prezzo}
          titolo={getTitoloTranslation({
            locale: locale,
            titolo_it: annuncio.titolo_it,
            titolo_en: annuncio.titolo_en,
          })}
          mq={annuncio.mq}
          comune={annuncio.comune}
          provincia={annuncio.provincia}
          consegna={annuncio.consegna}
          camere={annuncio.numero_camere}
          immagini={annuncio.url_immagini || undefined}
          tipo={annuncio.tipo}
          stato={annuncio.stato}
        />
      ))}
    </div>
  );
};