import { CardAnnuncio } from "~/components/annuncio_card";
import { getTitoloTranslation } from "~/lib/annuncio_details";
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
					camere={annuncio.numero_camere}
					codice={annuncio.codice}
					comune={annuncio.comune}
					consegna={annuncio.consegna}
					id={annuncio.id}
					immagini={annuncio.url_immagini || undefined}
					key={annuncio.codice}
					mq={annuncio.mq}
					prezzo={annuncio.prezzo}
					provincia={annuncio.provincia}
					stato={annuncio.stato}
					tipo={annuncio.tipo}
					titolo={getTitoloTranslation({
						locale: locale,
						titolo_en: annuncio.titolo_en,
						titolo_it: annuncio.titolo_it,
					})}
					videos={annuncio.url_video || undefined}
				/>
			))}
		</div>
	);
};