import { StatCard } from '@/components/admin';
import { Grid } from '@/components/ui/layout';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { BadgeCheck, Briefcase, Network, TrendingUp } from 'lucide-react';
import React from 'react';

interface DashboardStatsProps {
  stats: {
    total: number;
    verified: number;
    connections: number;
    newLast30Days: number;
  };
  isLoading?: boolean;
}

const DashboardStats = ({ stats, isLoading }: DashboardStatsProps) => {
  const { t } = useTranslation();

  return (
    <Grid cols={{ md: 2, lg: 4 }} gap="md">
      <StatCard
        title={t('adminPage.totalOrgs')}
        value={String(stats.total)}
        icon={<Briefcase className="h-4 text-current text-muted-foreground w-4" />}
      />
      <StatCard
        title={t('adminPage.verifiedOrgs')}
        value={String(stats.verified)}
        icon={<BadgeCheck className="h-4 text-current text-muted-foreground w-4" />}
      />
      <StatCard
        title={t('adminPage.connections')}
        value={String(stats.connections)}
        icon={<Network className="h-4 text-current text-muted-foreground w-4" />}
      />
      <StatCard
        title={t('adminPage.newLast30Days')}
        value={`+${stats.newLast30Days}`}
        icon={<TrendingUp className="h-4 text-current text-muted-foreground w-4" />}
      />
    </Grid>
  );
};

export default React.memo(DashboardStats);