import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import { Grid } from '@/components/ui/layout';
import { Heading, Price, Text } from '@/components/ui/Typography.tsx';
import { DollarSign, Leaf, TrendingUp } from 'lucide-react';

type Props = {
  totalCo2Saved: number;
  totalEconomicValue: number;
  activeMatches: number;
  t: (key: string) => string;
};

const ImpactMetricsSection = ({ totalCo2Saved, totalEconomicValue, activeMatches, t }: Props) => {
  if (totalCo2Saved <= 0 && totalEconomicValue <= 0) return null;

  return (
    <Grid cols={{ md: 3 }} gap="md">
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center gap-2">
            <Leaf className="h-4 w-4 text-green-600" />
            <CardTitle className="text-sm font-medium text-muted-foreground">
              {t('dashboard.co2Saved')}
            </CardTitle>
          </div>
        </CardHeader>
        <CardContent>
          <Heading level="h3" className="text-green-600 mb-1">
            {totalCo2Saved} t
          </Heading>
          <Text variant="muted" className="text-xs">
            {t('dashboard.perYear')}
          </Text>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center gap-2">
            <DollarSign className="h-4 text-success w-4" />
            <CardTitle className="text-sm font-medium text-muted-foreground">
              {t('dashboard.economicValue')}
            </CardTitle>
          </div>
        </CardHeader>
        <CardContent>
          <Price value={totalEconomicValue} variant="large" className="text-success" />
          <Text variant="muted" className="text-xs mt-1">
            {t('dashboard.created')}
          </Text>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center gap-2">
            <TrendingUp className="h-4 text-blue-600 w-4" />
            <CardTitle className="text-sm font-medium text-muted-foreground">
              {t('dashboard.activeMatches')}
            </CardTitle>
          </div>
        </CardHeader>
        <CardContent>
          <Heading level="h3" className="text-blue-600 mb-1">
            {activeMatches}
          </Heading>
          <Text variant="muted" className="text-xs">
            {t('dashboard.operational')}
          </Text>
        </CardContent>
      </Card>
    </Grid>
  );
};

export default ImpactMetricsSection;