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

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

  return (
    <Credenza>
      <CredenzaTrigger asChild>
        <Button
          variant="destructive"
          className="flex w-full items-center gap-2"
        >
          <MessageCircleQuestion className="size-6" /> 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>
  );
};