"use client";

import Link from "next/link";
import type { SupportTicketListItem } from "@/features/tickets/types";
import { ticketsDict } from "@/features/tickets/dict";
import {
  formatTicketDate,
  getStatusBadgeClass,
} from "@/features/tickets/utils/ticket-helpers";

type TicketCardProps = {
  ticket: SupportTicketListItem;
  href: string;
};

export function TicketCard({ ticket, href }: TicketCardProps) {
  return (
    <Link
      href={href}
      className="flex flex-col gap-3 rounded-3xl bg-card p-4 shadow-soft-sm transition-transform hover:scale-[1.01] active:scale-[0.99] sm:p-5"
    >
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <h2 className="truncate text-base font-semibold text-card-foreground">
            {ticket.subject}
          </h2>
          {ticket.category ? (
            <p className="mt-1 text-xs text-muted-foreground">{ticket.category}</p>
          ) : null}
        </div>
        <span
          className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-medium ${getStatusBadgeClass(ticket.status)}`}
        >
          {ticketsDict.statuses[ticket.status]}
        </span>
      </div>

      <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
        <span>{ticketsDict.priorities[ticket.priority]}</span>
        <span>•</span>
        <span>
          {ticketsDict.messagesCount.replace(
            "{count}",
            ticket._count.messages.toLocaleString("fa-IR"),
          )}
        </span>
      </div>

      <p className="text-xs text-muted-foreground">
        {formatTicketDate(ticket.updatedAt)}
      </p>
    </Link>
  );
}