const PRIORITY_CONFIG = {
  low: { label: 'Low', dot: 'bg-text-tertiary' },
  medium: { label: 'Medium', dot: 'bg-blue-500' },
  high: { label: 'High', dot: 'bg-orange-500' },
  urgent: { label: 'Urgent', dot: 'bg-red-500' },
}

const TYPE_LABELS = {
  request: 'Request',
  correction: 'Correction',
  complaint: 'Complaint',
  suggestion: 'Suggestion',
  other: 'Other',
}

export default function IssueCard({ issue, onClick }) {
  const priority = PRIORITY_CONFIG[issue.priority] || PRIORITY_CONFIG.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>
  )
}