import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import { Grid } from '@/components/ui/layout';
import MetricItem from '@/components/ui/MetricItem.tsx';
import { formatNumber } from '@/lib/fin';
import { Briefcase, MapPin, Target, TrendingUp } from 'lucide-react';

type Props = {
  totalOrganizations: number;
  totalSites: number;
  totalResourceFlows: number;
  totalMatches: number;
  t: (key: string) => string;
};

const PlatformOverviewSection = ({
  totalOrganizations,
  totalSites,
  totalResourceFlows,
  totalMatches,
  t,
}: Props) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('dashboard.platformOverview')}</CardTitle>
      </CardHeader>
      <CardContent>
        <Grid cols={{ md: 2, lg: 4 }} gap="md">
          <MetricItem
            icon={<Briefcase className="h-5 w-5 text-primary" />}
            label={t('dashboard.organizations')}
            value={formatNumber(totalOrganizations)}
          />
          <MetricItem
            icon={<MapPin className="h-5 w-5 text-warning" />}
            label={t('dashboard.sites')}
            value={formatNumber(totalSites)}
          />
          <MetricItem
            icon={<Target className="h-5 w-5 text-success" />}
            label={t('dashboard.resourceFlows')}
            value={formatNumber(totalResourceFlows)}
          />
          <MetricItem
            icon={<TrendingUp className="h-5 w-5 text-purple-500" />}
            label={t('dashboard.matches')}
            value={formatNumber(totalMatches)}
          />
        </Grid>
      </CardContent>
    </Card>
  );
};

export default PlatformOverviewSection;