import { ArrowRight } from "lucide-react";
import Link from "next/link";
import { useTranslation } from "~/providers/I18nProvider";
import { buildRicercaUrl } from "~/providers/RicercaProvider";
import { Button } from "./ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";

const it = {
	title: "Ricerche frequenti",
	transitorio: "Transitori",
	stabili: "Stabili",
};

const en = {
	title: "Frequent Searches",
	transitorio: "Short-term",
	stabili: "Stable",
};

export const FrequentSearches = () => {
	const { locale } = useTranslation();
	const t = locale === "en" ? en : it;
	return (
		<Card className="mx-auto mb-4 max-w-4xl gap-4 border-0 bg-secondary shadow-none">
			<CardHeader>
				<CardTitle className="text-center font-bold text-3xl sm:text-2xl">
					{t.title}
				</CardTitle>
			</CardHeader>
			<CardContent className="mx-auto flex max-w-fit flex-wrap items-center justify-center gap-4 px-2 sm:px-6">
				<Link href={buildRicercaUrl({ tipo: "Transitorio" })}>
					<Button
						className="flex items-center gap-1 border-2 border-transitorio bg-transitorio text-lg text-white"
						data-umami-event="frequent_search_transitorio"
						size="lg"
						variant="flat"
					>
						{t.transitorio}
						<ArrowRight />
					</Button>
				</Link>
				<Link href={buildRicercaUrl({ tipo: "Stabile" })}>
					<Button
						className="flex items-center gap-1 border-2 border-stabile bg-stabile text-lg text-white"
						data-umami-event="frequent_search_stabile"
						size="lg"
						variant="flat"
					>
						{t.stabili}
						<ArrowRight />
					</Button>
				</Link>
				<Link
					href={buildRicercaUrl({
						comune: "Bassano del Grappa",
					})}
				>
					<Button
						className="flex items-center gap-1 border-2 border-primary text-lg"
						data-umami-event="frequent_search_bassano"
						size="lg"
					>
						Bassano del Grappa
						<ArrowRight />
					</Button>
				</Link>

				<Link
					href={buildRicercaUrl({
						comune: "Bassano del Grappa",
						tipo: "Transitorio",
					})}
				>
					<Button
						className="flex items-center gap-1 border-2 border-transitorio bg-transitorio text-lg text-white"
						data-umami-event="frequent_search_bassano_transitorio"
						size="lg"
						variant="flat"
					>
						{t.transitorio} Bassano
						<ArrowRight />
					</Button>
				</Link>

				<Link
					href={buildRicercaUrl({
						comune: "Marostica",
					})}
				>
					<Button
						className="flex items-center gap-1 border-2 border-primary text-lg"
						data-umami-event="frequent_search_marostica"
						size="lg"
					>
						Marostica
						<ArrowRight />
					</Button>
				</Link>
			</CardContent>
		</Card>
	);
};