"use client";

import { useTranslations } from "next-intl";
import type { SupportTicketStatus } from "@/types";

const STATUS_STYLES: Record<SupportTicketStatus, string> = {
  // Open: blue, neutral attention.
  open: "bg-blue-400/15 text-blue-400 border border-blue-400/20",
  // In progress: amber, work happening.
  in_progress: "bg-amber-400/15 text-amber-400 border border-amber-400/20",
  // Waiting for customer: violet — distinct from in_progress so admins
  // can quickly visually separate "I owe a response" from "they owe one".
  waiting_for_customer:
    "bg-violet-400/15 text-violet-400 border border-violet-400/20",
  resolved: "bg-success/15 text-success border border-success/20",
  // Reopened: red — flags admin attention because the previous
  // resolution didn't stick.
  reopened: "bg-red-400/15 text-red-400 border border-red-400/20",
};

/**
 * Small status pill rendered on ticket list rows and detail header.
 * Translated label, colour-coded by ticket lifecycle stage.
 */
export function TicketStatusBadge({
  status,
}: {
  status: SupportTicketStatus;
}) {
  const t = useTranslations("support");
  return (
    <span
      className={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full whitespace-nowrap ${STATUS_STYLES[status]}`}
    >
      {t(`status_${status}`)}
    </span>
  );
}