'use client';

import { Button } from '@/components/ui/Button';
import { Section } from '@/components/ui/Section';
import { Heading, Text } from '@/components/ui/Typography';
import { useTranslation } from '@/lib/hooks/useTranslation';

export function EmptyCartMessage() {
  const { t } = useTranslation();
  
  return (
    <Section>
      <div className="flex flex-col items-center justify-center text-center p-8 max-w-md mx-auto border rounded-lg bg-gray-50">
        <Heading level={3} className="mb-3">{t('cart.emptyCart')}</Heading>
        <Text color="muted" className="mb-6">Add some items to your cart to see them here.</Text>
        <Button 
          href="/products" 
          variant="primary"
        >
          {t('cart.startShopping')}
        </Button>
      </div>
    </Section>
  );
}