'use client'

import Link from 'next/link'
import { ShoppingBag, ArrowRight } from 'lucide-react'
import { useTranslations } from 'next-intl'

export default function CartEmpty() {
  const t = useTranslations('Cart')

  return (
    <div className="text-center py-16">
      <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
        <ShoppingBag size={48} className="text-gray-custom" />
      </div>
      <h2 className="text-2xl font-bold text-dark mb-2">{t('emptyTitle')}</h2>
      <p className="text-gray-custom mb-6">{t('emptyDescription')}</p>
      <Link
        href="/"
        className="inline-flex items-center gap-2 bg-gradient-primary text-white px-6 py-3 rounded-lg font-semibold hover:shadow-md transition"
      >
        {t('startShopping')}
        <ArrowRight size={18} />
      </Link>
    </div>
  )
}