import React from 'react';
import { Card } from '../ui/Card.tsx';
import { Badge } from '../ui/Badge.tsx';
import { Incident } from '../../data/schema.ts';
import { formatCurrency } from '../../lib/utils.ts';

interface IncidentCardProps {
  incident: Incident;
}

const severityVariant = {
  critical: 'danger' as const,
  high: 'warning' as const,
  medium: 'info' as const,
  low: 'default' as const,
};

const statusVariant = {
  resolved: 'success' as const,
  investigating: 'warning' as const,
  monitoring: 'info' as const,
  fixed: 'success' as const,
};

export const IncidentCard: React.FC<IncidentCardProps> = ({ incident }) => {
  return (
    <Card className="p-4 min-w-[300px]">
      <div className="flex items-start justify-between mb-2">
        <Badge variant={severityVariant[incident.severity]}>{incident.severity}</Badge>
        <Badge variant={statusVariant[incident.status]}>{incident.status}</Badge>
      </div>
      <h3 className="text-lg font-display font-semibold mb-1">{incident.name}</h3>
      <p className="text-sm text-[var(--ink-muted)] mb-3 line-clamp-2">{incident.description}</p>
      <div className="flex items-center justify-between text-sm">
        <span className="text-[var(--ink-muted)]">{incident.date}</span>
        <span className="font-bold text-[var(--brand-500)]">{formatCurrency(incident.price)}</span>
      </div>
    </Card>
  );
};