import type { RelatedTicket } from '@/api/psaContext'

interface Props {
  tickets: RelatedTicket[]
  onSelectTicket: (ticketId: number) => void
}

export function TicketRelated({ tickets, onSelectTicket }: Props) {
  if (tickets.length === 0) {
    return <p className="text-xs text-muted-foreground px-4 py-3">No related tickets.</p>
  }

  return (
    <div className="space-y-2 px-4 py-3">
      {tickets.map(ticket => (
        <button
          key={ticket.id}
          onClick={() => onSelectTicket(ticket.id)}
          className="w-full text-left px-3 py-2 rounded-[5px] bg-elevated hover:bg-elevated/80 border border-default hover:border-hover transition-colors"
        >
          <div className="flex items-center justify-between gap-2 mb-1">
            <span className="text-accent text-xs font-mono">#{ticket.id}</span>
            {ticket.board && <span className="text-xs text-muted-foreground">{ticket.board}</span>}
          </div>
          <p className="text-sm text-primary line-clamp-2 mb-1.5">{ticket.summary}</p>
          <div className="flex items-center gap-2">
            {ticket.status && (
              <span className="px-1.5 py-0.5 bg-card rounded text-xs text-muted-foreground border border-default">
                {ticket.status}
              </span>
            )}
            {ticket.priority && (
              <span className="px-1.5 py-0.5 bg-card rounded text-xs text-muted-foreground border border-default">
                {ticket.priority}
              </span>
            )}
          </div>
        </button>
      ))}
    </div>
  )
}