goodgo-platform/apps/web/components/reports/report-card.tsx

'use client';

import { Calendar, Trash2, Eye } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Link } from '@/i18n/navigation';
import type { Report } from '@/lib/reports-api';
import { ReportStatusBadge } from './report-status-badge';
import { ReportTypeBadge } from './report-type-badge';

interface ReportCardProps {
  report: Report;
  onDelete?: (id: string) => void;
}

export function ReportCard({ report, onDelete }: ReportCardProps) {
  const date = new Date(report.createdAt).toLocaleDateString('vi-VN', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  });

  return (
    <div className="group rounded-lg border bg-card p-4 transition-shadow hover:shadow-md">
      <div className="flex items-start justify-between">
        <div className="flex-1 space-y-1">
          <div className="flex items-center gap-2">
            <ReportTypeBadge type={report.type} />
            <ReportStatusBadge status={report.status} />
          </div>
          <h3 className="line-clamp-1 text-sm font-semibold">{report.title}</h3>
          <p className="flex items-center gap-1 text-xs text-muted-foreground">
            <Calendar className="h-3 w-3" />
            {date}
          </p>
        </div>

        <div className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
          {report.status === 'READY' && (
            <Link href={`/dashboard/reports/${report.id}`}>
              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                <Eye className="h-4 w-4" />
              </Button>
            </Link>
          )}
          {onDelete && (
            <Button
              variant="ghost"
              size="sm"
              className="h-8 w-8 p-0 text-destructive hover:text-destructive"
              onClick={() => onDelete(report.id)}
            >
              <Trash2 className="h-4 w-4" />
            </Button>
          )}
        </div>
      </div>

      {report.status === 'READY' && (
        <Link
          href={`/dashboard/reports/${report.id}`}
          className="mt-3 block text-xs font-medium text-primary hover:underline"
        >
          Xem báo cáo
        </Link>
      )}

      {report.status === 'FAILED' && report.errorMsg && (
        <p className="mt-2 text-xs text-destructive">{report.errorMsg}</p>
      )}
    </div>
  );
}