import { MessageCirclePlus } from "lucide-react";
import {
	Credenza,
	CredenzaBody,
	CredenzaContent,
	CredenzaDescription,
	CredenzaHeader,
	CredenzaTitle,
	CredenzaTrigger,
} from "~/components/custom_ui/credenza";
import { Button } from "~/components/ui/button";
import { FormContattoAnnucio } from "~/forms/FormContattoAnnuncio";
import { useAnnuncio } from "~/providers/AnnuncioProvider";
import { useTranslation } from "~/providers/I18nProvider";

export const ContattoAnnuncio = () => {
	const { codice } = useAnnuncio();
	const { t } = useTranslation();
	return (
		<Credenza>
			<CredenzaTrigger asChild>
				<Button
					className="w-full text-lg md:text-base lg:text-lg"
					size="xl"
					variant="success"
				>
					<MessageCirclePlus /> {t.contatto.annuncio_cta.button}
				</Button>
			</CredenzaTrigger>
			<CredenzaContent className="max-h-[90vh]">
				<CredenzaHeader>
					<CredenzaTitle>{t.contatto.annuncio_cta.title}</CredenzaTitle>
					<CredenzaDescription>
						{t.contatto.annuncio_cta.description}
					</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="max-h-[80vh] overflow-auto pb-5">
					<FormContattoAnnucio codice={codice} />
				</CredenzaBody>
			</CredenzaContent>
		</Credenza>
	);
};
