import { Card, BlockStack, Text, InlineGrid, Box } from "@shopify/polaris";

export function DashboardMetrics({ reviews }) {
  const totalReviews = reviews.length;
  
  // Calculate unique products
  const uniqueProducts = new Set(reviews.map(r => r.product_id).filter(Boolean)).size;

  return (
    <InlineGrid columns={{ xs: 1, sm: 2 }} gap="400">
      <Card>
        <BlockStack gap="200">
          <Text as="h3" variant="headingSm" tone="subdued">
            Total Reviews
          </Text>
          <Text as="p" variant="heading3xl">
            {totalReviews}
          </Text>
        </BlockStack>
      </Card>
      
      <Card>
        <BlockStack gap="200">
          <Text as="h3" variant="headingSm" tone="subdued">
            Products Reviewed
          </Text>
          <Text as="p" variant="heading3xl">
            {uniqueProducts}
          </Text>
        </BlockStack>
      </Card>
    </InlineGrid>
  );
}