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 = {
  totalConnections: number;
  activeConnections: number;
  connectionRate: number;
  t: (key: string) => string;
};

const ConnectionAnalyticsSection = ({
  totalConnections,
  activeConnections,
  connectionRate,
  t,
}: Props) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('analyticsDashboard.connections')}</CardTitle>
      </CardHeader>
      <CardContent>
        <Grid cols={{ md: 3 }} gap="md">
          <CenteredContent>
            <Heading level="h3" className="text-primary mb-1">
              {totalConnections}
            </Heading>
            <Text variant="muted">{t('analyticsDashboard.totalConnections')}</Text>
          </CenteredContent>
          <CenteredContent>
            <Heading level="h3" className="text-success mb-1">
              {activeConnections}
            </Heading>
            <Text variant="muted">{t('analyticsDashboard.activeConnections')}</Text>
          </CenteredContent>
          <CenteredContent>
            <Heading level="h3" className="text-warning mb-1">
              {Math.round(connectionRate * 100)}%
            </Heading>
            <Text variant="muted">{t('analyticsDashboard.connectionRate')}</Text>
          </CenteredContent>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default ConnectionAnalyticsSection;