'use client'

import Link from 'next/link'
import { useTranslations } from 'next-intl'
import { ChevronRight, Home } from 'lucide-react'

interface ProductBreadcrumbProps {
  category?: string | null
  categorySlug?: string | null
  productName: string
}

export default function ProductBreadcrumb({ category, categorySlug, productName }: ProductBreadcrumbProps) {
  const t = useTranslations('ProductDetail')

  return (
    <div className="flex items-center gap-2 text-sm text-gray-custom mb-6">
      <Link href="/" className="hover:text-primary transition-colors flex items-center gap-1">
        <Home size={14} />
        {t('home')}
      </Link>
      {category && categorySlug && (
        <>
          <ChevronRight size={14} />
          <Link href={`/category/${categorySlug}`} className="hover:text-primary transition-colors">
            {category}
          </Link>
        </>
      )}
      <ChevronRight size={14} />
      <span className="text-dark font-medium">{productName}</span>
    </div>
  )
}