'use client';

import { Section } from "@/components/ui/Section";
import { Heading, Text } from "@/components/ui/Typography";
import { useTranslation } from "@/lib/hooks/useTranslation";
import { Product } from "lib/shopify/types";
import { ProductGridWithTranslation } from "./ProductGridWithTranslation";

interface ProductsPageContentProps {
  products: Product[];
}

export function ProductsPageContent({ products }: ProductsPageContentProps) {
  const { t } = useTranslation();

  // If no products, display a message
  if (!products || products.length === 0) {
    return (
      <Section>
        <Heading level={1} align="center" className="mb-4">{t('products.title')}</Heading>
        <Text className="text-center">{t('products.emptyMessage')}</Text>
      </Section>
    );
  }

  return (
    <Section spacing="xs">
      <ProductGridWithTranslation products={products} />
    </Section>
  );
} 