import { MessageCircleQuestion } 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";

export const ContattoAnnuncio = () => {
	const { codice } = useAnnuncio();

	return (
		<Credenza>
			<CredenzaTrigger asChild>
				<Button className="w-full" variant="destructive">
					<MessageCircleQuestion className="size-5" /> Contattaci
				</Button>
			</CredenzaTrigger>
			<CredenzaContent className="max-h-[90vh]">
				<CredenzaHeader>
					<CredenzaTitle>Contattaci per avere informazioni</CredenzaTitle>
					<CredenzaDescription>
						Ti contatteremo il prima possibile per darti più informazioni
					</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="max-h-[80vh] overflow-auto pb-5">
					<FormContattoAnnucio codice={codice} />
				</CredenzaBody>
			</CredenzaContent>
		</Credenza>
	);
};
