infoalloggi-monorepo/apps/infoalloggi/src/components/servizio/annuncio_card.tsx

import { ExternalLink } from "lucide-react";
import Link from "next/link";
import { ImageFlbk } from "~/components/ImageWithFallback";
import { AnnuncioActions } from "~/components/servizio/annuncio_actions";
import { Interactions } from "~/components/servizio/interactions";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { handleConsegna } from "~/lib/annuncio_details";
import { getStorageUrl } from "~/lib/storage_utils";
import { cn, formatCurrency } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider";
import { useServizioAnnuncio } from "~/providers/ServizioProvider";
import type { AnnuncioRicerca } from "~/server/controllers/annunci.controller";
import { AnnuncioDettaglio, TipoBadge } from "./annuncio_dettaglio";

export const AnnuncioCard = ({ className }: { className?: string }) => {
	const { data } = useServizioAnnuncio();

	return (
		<BasicAnnuncioCard
			actions={<AnnuncioActions />}
			className={className}
			data={{
				...data,
				modificato_il: data.modificato_il ? new Date(data.modificato_il) : null,
				media_updated_at: data.media_updated_at
					? new Date(data.media_updated_at)
					: null,
			}}
			interactions={<Interactions />}
		/>
	);
};
export const BasicAnnuncioCard = ({
	actions,
	interactions,
	className,
	data,
}: {
	actions?: React.ReactNode;
	interactions?: React.ReactNode;
	className?: string;
	data: AnnuncioRicerca;
}) => {
	const { t } = useTranslation();

	return (
		<Card className={cn("w-full border-white py-5", className)}>
			<CardHeader className="flex flex-row flex-wrap items-center justify-between space-y-0 pb-0">
				<CardTitle className="text-2xl">Codice: {data.codice}</CardTitle>
				{actions}
			</CardHeader>
			<CardContent className="px-4">
				<div className="flex w-full flex-col gap-4 md:flex-row md:gap-10">
					<ImageFlbk
						alt={data.codice}
						className="h-auto max-h-72 w-full rounded-md bg-[#e6e9ec] object-contain sm:max-w-xs"
						height={1080}
						priority
						src={
							(data?.images[0] &&
								getStorageUrl({
									storageId: data.images[0].img,
									params: {
										cacheKey: data.media_updated_at?.toISOString(),
										media: "image",
									},
								})) ||
							"/fallback-image.png"
						}
						width={1920}
					/>
					<div className="flex w-full flex-col gap-5">
						{interactions}

						<div className="flex flex-wrap items-center gap-3">
							<TipoBadge tipo={data.tipo} />
							<span>
								{handleConsegna({
									aggiornamento: t.card.in_aggiornamento,
									consegna: data.consegna,
									consegna_da: t.card.consegna_da,
									mesi: t.preferenze.mesi,
									subito: t.card.consegna_subito,
								})}
							</span>
							<span>{formatCurrency(data.prezzo / 1e2)}</span>
						</div>
						<div className="flex w-full flex-wrap items-center gap-5">
							<span className="text-wrap">{data.titolo_it || data.codice}</span>
							<div className="flex flex-wrap items-center gap-2">
								<AnnuncioDettaglio data={data} />
								{data.stato !== "Sospeso" && data.web && (
									<Link
										aria-label="Pagina Annuncio"
										href={`/annuncio/${data.codice}`}
									>
										<Button variant="outline">
											<ExternalLink className="size-6" />
										</Button>
									</Link>
								)}
							</div>
						</div>
					</div>
				</div>
			</CardContent>
		</Card>
	);
};