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, Target, Users } from 'lucide-react';

type Props = {
  myOrganizations: number;
  myProposals: number;
  myPendingProposals: number;
  t: (key: string) => string;
};

const YourContributionSection = ({
  myOrganizations,
  myProposals,
  myPendingProposals,
  t,
}: Props) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('dashboard.yourContribution')}</CardTitle>
      </CardHeader>
      <CardContent>
        <Grid cols={{ md: 2, lg: 3 }} gap="md">
          <MetricItem
            icon={<Briefcase className="h-5 text-primary w-5" />}
            label={t('dashboard.myOrganizations')}
            value={formatNumber(myOrganizations)}
          />
          <MetricItem
            icon={<Target className="h-5 text-success w-5" />}
            label={t('dashboard.myProposals')}
            value={formatNumber(myProposals)}
          />
          <MetricItem
            icon={<Users className="h-5 text-warning w-5" />}
            label={t('dashboard.myPendingProposals')}
            value={formatNumber(myPendingProposals)}
          />
        </Grid>
      </CardContent>
    </Card>
  );
};

export default YourContributionSection;