OpenFlare/frontend/app/(main)/components/dashboard/geo-distribution-list.tsx

'use client';

import {Globe2} from 'lucide-react';

import {Card, CardContent, CardDescription, CardHeader, CardTitle,} from '@/components/ui/card';
import {Progress} from '@/components/ui/progress';
import type {DistributionItem} from '@/lib/services/openflare';

import {formatCompactNumber} from './dashboard-utils';

export function GeoDistributionList({ items }: { items: DistributionItem[] }) {
  const sortedItems = [...items]
    .sort((left, right) => right.value - left.value)
    .slice(0, 8);
  const maxValue = sortedItems[0]?.value ?? 0;

  return (
    <Card className="border-dashed shadow-none">
      <CardHeader>
        <CardTitle className="text-sm font-semibold flex items-center gap-1.5">
          <Globe2 className="size-4 text-primary" />
          来源国家分布
        </CardTitle>
        <CardDescription className="text-xs">
          聚合最近 24 小时主要来源国家。
        </CardDescription>
      </CardHeader>
      <CardContent>
        {sortedItems.length === 0 ? (
          <div className="flex min-h-[180px] items-center justify-center text-xs text-muted-foreground">
            暂无来源分布数据
          </div>
        ) : (
          <div className="space-y-3">
            {sortedItems.map((item) => {
              const ratio = maxValue > 0 ? (item.value / maxValue) * 100 : 0;
              return (
                <div key={item.key} className="space-y-1.5">
                  <div className="flex items-center justify-between text-xs">
                    <span className="font-medium">{item.key || '未知'}</span>
                    <span className="font-mono tabular-nums text-muted-foreground">
                      {formatCompactNumber(item.value)}
                    </span>
                  </div>
                  <Progress value={ratio} className="h-1.5" />
                </div>
              );
            })}
          </div>
        )}
      </CardContent>
    </Card>
  );
}