'use client';

import { CheckCircle, Loader2, XCircle } from 'lucide-react';
import type { ReportStatus } from '@/lib/reports-api';

const statusConfig: Record<ReportStatus, { label: string; icon: typeof CheckCircle; className: string }> = {
  GENERATING: { label: 'Đang tạo...', icon: Loader2, className: 'text-blue-600 bg-blue-50' },
  READY: { label: 'Hoàn thành', icon: CheckCircle, className: 'text-green-600 bg-green-50' },
  FAILED: { label: 'Lỗi', icon: XCircle, className: 'text-red-600 bg-red-50' },
};

export function ReportStatusBadge({ status }: { status: ReportStatus }) {
  const config = statusConfig[status];
  const Icon = config.icon;

  return (
    <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${config.className}`}>
      <Icon className={`h-3 w-3 ${status === 'GENERATING' ? 'animate-spin' : ''}`} />
      {config.label}
    </span>
  );
}