const PRIORITY_DOTS = {
  low: 'bg-text-tertiary',
  medium: 'bg-blue-500',
  high: 'bg-orange-500',
  urgent: 'bg-red-500',
}

export default function IssueCard({ issue, onClick }) {
  const priority = { dot: PRIORITY_DOTS[issue.priority] || PRIORITY_DOTS.medium }

  const formatDate = (dateStr) => {
    if (!dateStr) return ''
    return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
  }

  return (
    <div
      onClick={() => onClick?.(issue)}
      className="bg-surface border border-border rounded-lg p-3 cursor-pointer hover:border-brand-primary/30 hover:shadow-sm transition-all"
    >
      {/* Priority dot + Title */}
      <div className="flex items-start gap-2 mb-2">
        <span className={`w-2 h-2 rounded-full mt-1.5 shrink-0 ${priority.dot}`} />
        <h4 className="text-sm font-medium text-text-primary line-clamp-2">{issue.title}</h4>
      </div>

      {/* Metadata */}
      <div className="flex items-center gap-2 flex-wrap">
        {issue.category && (
          <span className="text-[10px] px-1.5 py-0.5 rounded bg-surface-tertiary text-text-secondary font-medium">
            {issue.category}
          </span>
        )}
        {issue.brand_name && (
          <span className="text-[10px] px-1.5 py-0.5 rounded bg-brand-primary/10 text-brand-primary font-medium">
            {issue.brand_name}
          </span>
        )}
      </div>

      {/* Footer */}
      <div className="flex items-center justify-between mt-2 text-[10px] text-text-tertiary">
        <span className="truncate max-w-[60%]">{issue.submitter_name}</span>
        <span>{formatDate(issue.created_at || issue.CreatedAt)}</span>
      </div>
    </div>
  )
}