"use client";
import Barcode from "react-barcode";
import { Ticket } from "../data";
import { useTranslations } from "use-intl";
import { MapPinIcon, SaudiRiyal } from "lucide-react";

export function TicketCard({
  title,
  ticketNumber,
  eventTitle,
  location,
  name,
  bookingCode,
  startDate,
  endDate,
  startTime,
  endTime,
  barCode,
  price,
}: Ticket) {
  const t = useTranslations("DownloadTickets");
  return (
    <div className="rounded-[18px] overflow-hidden bg-[#FEFEFE] shadow-[var(--ticket-card-shadow)] pb-[11px]">
      <div className="flex items-center justify-between bg-vendor-primary text-white p-5 m-[10px] mb-[17px] rounded-[8px]">
        <div className="space-y-2">
          <h3 className="text-[24px] font-bold uppercase">{title}</h3>
          <span className="text-[14px]">
            {t("ticketNumber")} #{ticketNumber}
          </span>
        </div>
        {parseFloat(price || "0") > 0 ? (
          <span className="text-[40px] font-bold flex items-center">
            {price}
            <SaudiRiyal className="w-6 h-6 md:w-8 md:h-8" />
          </span>
        ) : (
          <span className="text-[20px] font-bold">{t("free")}</span>
        )}
      </div>

      <div className="pt-[7px] px-[30px] space-y-5">
        <div className="space-y-2">
          <p className="text-[20px] font-semibold">{eventTitle}</p>
          <p className="text-[16px] font-bold flex gap-1">
            <MapPinIcon className="w-[18px] h-[18px] text-vendor-primary shrink-0 mt-1" />
            {location}
          </p>
        </div>

        <div className="flex items-start justify-between gap-6">
          <div className="flex flex-col gap-6">
            <div>
              <p className="text-[14px] text-[#4D4D4D]">{t("name")}</p>
              <p className="font-bold text-[16px]">{name}</p>
            </div>
            <div>
              <p className="text-[14px] text-[#4D4D4D]">{t("startDate")}</p>
              <p className="font-bold text-[16px]">
                <span dir="auto">{startDate}</span>
              </p>
            </div>
            <div>
              <p className="text-[14px] text-[#4D4D4D]">{t("startTime")}</p>
              <p className="font-bold text-[16px]">
                <span dir="auto">{startTime}</span>
              </p>
            </div>
          </div>
          <div className="flex flex-col gap-6">
            <div>
              <p className="text-[14px] text-[#4D4D4D]">{t("bookingCode")}</p>
              <p className="font-bold text-[16px]">{bookingCode}</p>
            </div>
            <div>
              <p className="text-[14px] text-[#4D4D4D]">{t("endDate")}</p>
              <p className="font-bold text-[16px]">
                <span dir="auto">{endDate}</span>
              </p>
            </div>
            <div>
              <p className="text-[14px] text-[#4D4D4D]">{t("endTime")}</p>
              <p className="font-bold text-[16px]">
                <span dir="auto">{endTime}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div className="h-[60px] relative w-full flex items-center">
        <span className="w-[60px] h-full bg-[#F2F3F4] absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 rounded-full"></span>
        <span className="block h-[2px] w-full border-t border-[#675E5E]/50 border-dashed"></span>
        <span className="w-[60px] h-full bg-[#F2F3F4] absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 rounded-full"></span>
      </div>

      <div className="flex flex-col items-center text-center gap-5 p-[15px]">
        <Barcode
          value={barCode || ticketNumber}
          width={2.25}
          height={50}
          fontSize={14}
        />
        <p className="text-[12px] font-medium text-[#4D4D4D]">
          {t("scanBarcode")}
        </p>
      </div>
    </div>
  );
}