"use client";

import SectionTitle from "@/components/Shared/SectionTitle/Index";
import { Button } from "@/components/ui/button";
import { Download } from "lucide-react";
import { useTranslations } from "next-intl";
import { TicketCard } from "./TicketCard";
import { useRef } from "react";
import { downloadTicketPDF } from "@/lib/pdfUtils";
import type { Ticket } from "../data";
import { useRouter } from "next/navigation";

type Props = {
  ticket: Ticket;
};

export default function TicketSection({ ticket }: Props) {
  const router = useRouter();
  const t = useTranslations("DownloadTickets");
  const ticketRef = useRef<HTMLDivElement>(null);

  const handleDownloadPDF = () => {
    if (!ticketRef.current) return;
    downloadTicketPDF(ticketRef, `ticket-${ticket.id}.pdf`, [
      ticketRef.current.offsetWidth,
      ticketRef.current.offsetHeight,
    ]);
  };

  return (
    <section className="flex flex-col gap-5 md:gap-10">
      <div className="flex flex-col md:flex-row items-center justify-between gap-2">
        <SectionTitle title={t("ticketTitle")} onClick={() => router.back()} />

        <Button
          className="py-5 px-5.5 text-[18px] font-bold rounded-none shadow-none transition duration-300 text-vendor-primary bg-vendor-tertiary
                  hover:bg-transparent hover:border hover:border-vendor-primary hover:text-vendor-primary
                  disabled:opacity-50 disabled:cursor-not-allowed
                  w-full sm:w-fit"
          onClick={handleDownloadPDF}
        >
          {t("download")}
          <Download className="w-[18px] h-[18px]" />
        </Button>
      </div>

      <div className="flex items-center justify-center">
        <div className="w-full max-w-[400px]" ref={ticketRef}>
          <TicketCard {...ticket} />
        </div>
      </div>
    </section>
  );
}