'use client';

import React from 'react';
import { AlertCircle } from 'lucide-react';

interface IssueItem {
  id: string;
  severity: 'High' | 'Medium' | 'Low';
  title: string;
  location: string;
  timeAgo: string;
}

const DEFAULT_ISSUES: IssueItem[] = [
  { id: '1', severity: 'High', title: 'Duplicate results - Oyo State', location: 'PU 021, Ogbomoso LGA', timeAgo: '2h ago' },
  { id: '2', severity: 'High', title: 'Vandalism - FCT', location: 'PU 102, Abuja', timeAgo: '3h ago' },
  { id: '3', severity: 'Medium', title: 'Network failure - Kano State', location: 'PU 045, Dawakin Tofa LGA', timeAgo: '5h ago' },
  { id: '4', severity: 'Medium', title: 'Misinformation - Kaduna State', location: 'Social media reports', timeAgo: '6h ago' },
  { id: '5', severity: 'Low', title: 'Delayed result - Enugu State', location: 'PU 067, Nkanu West LGA', timeAgo: '8h ago' }
];

export const IssuesAndFlagsCard: React.FC = () => {
  return (
    <div className="bg-white rounded-2xl border border-slate-200/90 shadow-sm p-5 space-y-4">
      <div className="flex items-center justify-between border-b border-slate-100 pb-3">
        <div className="flex items-center space-x-2">
          <AlertCircle className="w-4 h-4 text-rose-600" />
          <h3 className="text-base font-black text-slate-900 tracking-tight">
            Issues & Flags
          </h3>
        </div>
        <span className="text-xs font-bold text-blue-600 hover:text-blue-800 cursor-pointer">
          View All
        </span>
      </div>

      <div className="space-y-3">
        {DEFAULT_ISSUES.map((issue) => (
          <div key={issue.id} className="flex items-start space-x-3 text-xs">
            {/* Severity Pill */}
            <span
              className={`px-2 py-0.5 rounded-md text-[10px] font-black uppercase flex-shrink-0 mt-0.5 ${
                issue.severity === 'High'
                  ? 'bg-rose-100 text-rose-700 border border-rose-200'
                  : issue.severity === 'Medium'
                  ? 'bg-amber-100 text-amber-700 border border-amber-200'
                  : 'bg-emerald-100 text-emerald-700 border border-emerald-200'
              }`}
            >
              {issue.severity}
            </span>

            <div className="flex-1 min-w-0">
              <p className="font-bold text-slate-800 leading-tight truncate">
                {issue.title}
              </p>
              <div className="flex items-center space-x-1.5 text-[11px] text-slate-500 mt-0.5">
                <span className="truncate">{issue.location}</span>
                <span>•</span>
                <span className="font-mono text-slate-400 flex-shrink-0">{issue.timeAgo}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};