import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import { CenteredContent } from '@/components/ui/CenteredContent.tsx';
import { Grid } from '@/components/ui/layout';
import { Heading, Text } from '@/components/ui/Typography.tsx';

type Props = {
  matchSuccessRate: number;
  avgMatchTime: number;
  topResourceTypes: Array<{ type: string; count: number }>;
  t: (key: string) => string;
};

const PlatformHealthSection = ({ matchSuccessRate, avgMatchTime, topResourceTypes, t }: Props) => {
  if (matchSuccessRate <= 0) return null;

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('dashboard.platformHealth')}</CardTitle>
      </CardHeader>
      <CardContent>
        <Grid cols={{ md: 3 }} gap="md">
          <CenteredContent>
            <Heading level="h3" className="text-success mb-1">
              {Math.round(matchSuccessRate * 100)}%
            </Heading>
            <Text variant="muted" tKey="dashboard.matchSuccessRate" />
          </CenteredContent>

          <CenteredContent>
            <Heading level="h3" className="text-primary mb-1">
              {avgMatchTime.toFixed(1)}
            </Heading>
            <Text variant="muted" tKey="dashboard.avgMatchTime" />
          </CenteredContent>

          <CenteredContent>
            <Heading level="h3" className="text-warning mb-1">
              {topResourceTypes.length}
            </Heading>
            <Text variant="muted" tKey="dashboard.activeResourceTypes" />
          </CenteredContent>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default PlatformHealthSection;