import {
  ShieldOff,
  Building2,
  Plane,
  Ship,
  Shield,
  Car,
  Drone,
  Rocket,
  Asterisk,
  Amphora,
  Layers,
  Sailboat,
  Warehouse,
} from 'lucide-react'
import type { CombatLosses } from '@/data/mockData'

interface CombatLossesOtherPanelProps {
  usLosses: CombatLosses
  iranLosses: CombatLosses
  className?: string
}

export function CombatLossesOtherPanel({ usLosses, iranLosses, className = '' }: CombatLossesOtherPanelProps) {
  const otherRows = [
    { label: '基地', icon: Building2, iconColor: 'text-amber-500', us: `${usLosses.bases.destroyed}/${usLosses.bases.damaged}`, ir: `${iranLosses.bases.destroyed}/${iranLosses.bases.damaged}` },
    { label: '战机', icon: Plane, iconColor: 'text-sky-400', us: usLosses.aircraft, ir: iranLosses.aircraft },
    { label: '战舰', icon: Ship, iconColor: 'text-blue-500', us: usLosses.warships, ir: iranLosses.warships },
    { label: '装甲', icon: Shield, iconColor: 'text-emerald-500', us: usLosses.armor, ir: iranLosses.armor },
    { label: '车辆', icon: Car, iconColor: 'text-slate-400', us: usLosses.vehicles, ir: iranLosses.vehicles },
    { label: '航母', icon: Layers, iconColor: 'text-amber-600', us: usLosses.carriers ?? 0, ir: iranLosses.carriers ?? 0 },
    { label: '民船', icon: Sailboat, iconColor: 'text-cyan-400', us: usLosses.civilianShips ?? 0, ir: iranLosses.civilianShips ?? 0 },
    { label: '机/港', icon: Warehouse, iconColor: 'text-orange-400', us: usLosses.airportPort ?? 0, ir: iranLosses.airportPort ?? 0 },
    { label: '无人机', icon: Drone, iconColor: 'text-violet-400', us: usLosses.drones ?? 0, ir: iranLosses.drones ?? 0 },
    { label: '导弹', icon: Rocket, iconColor: 'text-orange-500', us: usLosses.missiles ?? 0, ir: iranLosses.missiles ?? 0 },
    { label: '直升机', icon: Asterisk, iconColor: 'text-teal-400', us: usLosses.helicopters ?? 0, ir: iranLosses.helicopters ?? 0 },
    { label: '潜艇', icon: Amphora, iconColor: 'text-indigo-400', us: usLosses.submarines ?? 0, ir: iranLosses.submarines ?? 0 },
  ]

  return (
    <div
      className={`min-w-0 shrink-0 rounded border border-military-border/50 bg-military-dark/30 px-2 py-1.5 font-orbitron ${className}`}
    >
      <div className="mb-1 flex items-center gap-1 text-[8px] text-military-text-secondary">
        <ShieldOff className="h-3 w-3 shrink-0 text-amber-500" />
        装备毁伤 | 美 vs 伊
      </div>
      <div className="grid min-w-0 grid-cols-2 gap-x-2 gap-y-1 tabular-nums sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
        {otherRows.map(({ label, icon: Icon, iconColor, ...rest }, i) => (
          <div key={i} className="flex min-w-0 items-center justify-between gap-1">
            <span className="flex shrink-0 items-center gap-0.5 text-military-text-primary text-[9px] sm:text-[10px]">
              <Icon className={`h-2.5 w-2.5 shrink-0 sm:h-3 sm:w-3 ${iconColor}`} />
              {label}
            </span>
            <span className="min-w-0 shrink-0 text-right text-[9px] sm:text-[10px]">
              <span className="text-military-us tabular-nums">{rest.us}</span>
              <span className="text-military-text-secondary/60">:</span>
              <span className="text-military-iran tabular-nums">{rest.ir}</span>
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}
