"use client";
import { useLocale, useTranslations } from "next-intl";
import { Building2, CalendarClock, UserRound } from "lucide-react";
import type { InvitePayload } from "@/lib/invite";
import { cn } from "@/lib/utils";

interface InviteDetailsProps {
  invite: InvitePayload;
  showExpiry?: boolean;
  className?: string;
}

export default function InviteDetails({
  invite,
  showExpiry = true,
  className,
}: InviteDetailsProps) {
  const t = useTranslations("InvitePage");
  const locale = useLocale();

  const rows = [
    {
      icon: UserRound,
      label: t("role"),
      value: invite.e === "office_boy" ? t("officeBoy") : t("employee"),
    },
    {
      icon: Building2,
      label: t("workPlace"),
      value: invite.wn || "—",
    },
  ];

  if (showExpiry && invite.x) {
    rows.push({
      icon: CalendarClock,
      label: t("validUntil"),
      value: new Intl.DateTimeFormat(locale, {
        calendar: "gregory",
        day: "numeric",
        month: "long",
        year: "numeric",
      }).format(new Date(`${invite.x}T00:00:00`)),
    });
  }

  return (
    <dl
      className={cn(
        "flex flex-col divide-y divide-white/10 rounded-[16px] border border-white/10 bg-primary-darker/40 px-4 sm:px-5",
        className,
      )}
    >
      {rows.map(({ icon: Icon, label, value }) => (
        <div
          key={label}
          className="flex items-center justify-between gap-3 py-3 sm:py-3.5"
        >
          <dt className="flex items-center gap-2.5 text-[13px] sm:text-[15px] text-white/70">
            <span className="flex size-8 items-center justify-center rounded-full bg-secondary-main/15 text-secondary-main">
              <Icon className="size-4" />
            </span>
            {label}
          </dt>
          <dd className="text-[14px] sm:text-[16px] font-bold text-white">
            {value}
          </dd>
        </div>
      ))}
    </dl>
  );
}