import type { IncidentCompat } from '@interfaces/incidents/IncidentsInterface';
import { getStatusLabel } from '../IncidentsView';

export function IncidentTooltipContent({ incident: i }: { incident: IncidentCompat }) {
  const statusColor =
    i.status === 'active'
      ? 'var(--color-danger)'
      : i.status === 'investigating'
        ? 'var(--color-warning)'
        : 'var(--fg-disabled)';

  return (
    <>
      <div className="text-label-2 font-bold text-fg" style={{ marginBottom: 3 }}>
        {i.name}
      </div>
      <div className="text-caption text-fg-disabled" style={{ marginBottom: 4 }}>
        {i.date} {i.time}
      </div>
      <div className="flex justify-between items-center">
        <span className="text-caption font-semibold" style={{ color: statusColor }}>
          {getStatusLabel(i.status)}
        </span>
        <span className="text-caption text-color-info font-mono">
          {i.location.lat.toFixed(3)}°N, {i.location.lon.toFixed(3)}°E
        </span>
      </div>
    </>
  );
}
