import React from 'react';
import { Card } from '../ui/Card.tsx';
import { Badge } from '../ui/Badge.tsx';
import { CheckCircle, AlertTriangle, XCircle, Clock } from 'lucide-react';

interface DiagnosticCardProps {
  label: string;
  status: 'pass' | 'fail' | 'pending';
  message?: string;
}

const statusConfig = {
  pass: { icon: CheckCircle, variant: 'success' as const, text: 'Passed' },
  fail: { icon: XCircle, variant: 'danger' as const, text: 'Failed' },
  pending: { icon: Clock, variant: 'warning' as const, text: 'Pending' },
};

export const DiagnosticCard: React.FC<DiagnosticCardProps> = ({ label, status, message }) => {
  const config = statusConfig[status];
  const Icon = config.icon;
  return (
    <Card className="p-4">
      <div className="flex items-center gap-3">
        <Icon className={`w-5 h-5 text-[var(--${config.variant})]`} />
        <div className="flex-1">
          <div className="flex items-center justify-between">
            <span className="font-medium text-[var(--ink)]">{label}</span>
            <Badge variant={config.variant}>{config.text}</Badge>
          </div>
          {message && <p className="text-sm text-[var(--ink-muted)] mt-1">{message}</p>}
        </div>
      </div>
    </Card>
  );
};