import {
  Item,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";
import {
  Building2Icon,
  CrosshairIcon,
  ShieldIcon,
  UsersIcon,
} from "lucide-react";

interface QuickStatsProps {
  activeCampaigns: number;
  totalMissions: number;
  totalStructures: number;
  totalFactions: number;
  totalMembers: number;
}

export function QuickStats({
  activeCampaigns,
  totalMissions,
  totalStructures,
  totalFactions,
  totalMembers,
}: QuickStatsProps) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
      <Item variant="muted" size="sm">
        <ItemMedia variant="icon">
          <CrosshairIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Active Campaigns</ItemTitle>
          <ItemDescription>{activeCampaigns}</ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="muted" size="sm">
        <ItemMedia variant="icon">
          <CrosshairIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Total Missions</ItemTitle>
          <ItemDescription>{totalMissions}</ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="muted" size="sm">
        <ItemMedia variant="icon">
          <Building2Icon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Structures</ItemTitle>
          <ItemDescription>{totalStructures}</ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="muted" size="sm">
        <ItemMedia variant="icon">
          <ShieldIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Factions</ItemTitle>
          <ItemDescription>{totalFactions}</ItemDescription>
        </ItemContent>
      </Item>
      <Item variant="muted" size="sm">
        <ItemMedia variant="icon">
          <UsersIcon />
        </ItemMedia>
        <ItemContent>
          <ItemTitle>Operators</ItemTitle>
          <ItemDescription>{totalMembers}</ItemDescription>
        </ItemContent>
      </Item>
    </div>
  );
}