import { HelpCircle } from "lucide-react";
import Link from "next/link";
import { useTranslation } from "~/providers/I18nProvider";
import {
	ExpandableScreen,
	ExpandableScreenContent,
	ExpandableScreenTrigger,
} from "./expandable_screen";
import { Button } from "./ui/button";
import { Separator } from "./ui/separator";

export const ComeFunziona = () => {
	const { t } = useTranslation();
	return (
		<ExpandableScreen
			contentRadius="14px"
			layoutId="cta-card"
			triggerRadius="100px"
		>
			<ExpandableScreenTrigger className="w-full">
				<Button
					className="w-full text-lg md:text-base lg:text-lg"
					data-umami-event="come_funziona_guida_open"
					size="xl"
				>
					<HelpCircle />
					<span>{t.come_funziona_guida.title}</span>
				</Button>
			</ExpandableScreenTrigger>

			<ExpandableScreenContent className="bg-primary text-primary-foreground">
				<div className="h-full space-y-6 p-6 py-12 sm:space-y-16 sm:px-10">
					{t.come_funziona_guida.features.map((text, index) => (
						// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
						<div className="space-y-6" key={index}>
							<div className="space-y-2">
								<h2 className="font-semibold text-4xl">{text.title}</h2>
								{text.parts.map((p, i) => {
									return typeof p === "object" ? (
										<Link
											className="text-2xl underline after:content-['_↗'] hover:text-secondary"
											href={p.href}
											// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
											key={`${index}-link-${i}`}
										>
											{p.text}
										</Link>
									) : (
										<p
											className="text-2xl"
											// biome-ignore lint/suspicious/noArrayIndexKey: <ok>
											key={`${index}-${i}`}
										>
											{p}
										</p>
									);
								})}
							</div>
							<Separator />
						</div>
					))}
				</div>
			</ExpandableScreenContent>
		</ExpandableScreen>
	);
};