'use client'

import {ShoppingCartIcon} from 'lucide-react'
import {useTranslations} from 'next-intl'

import {Link} from '@/i18n/routing'
import useCartStore from '@/store/cart-store'

export default function HeaderShoppingCartIcon() {
	const t = useTranslations('cart')
	const {cartItems} = useCartStore()
	const cartCount = cartItems.length

	return (
		<Link href={'/cart' as never} className='header-button' aria-label='Кошик'>
			<button className='flex flex-col items-center' role='button'>
				<ShoppingCartIcon className='h-[21px] w-[21px]' />

				<span className='font1-bold text-sm'>
					{t('basket')} [{cartCount}]
				</span>
			</button>
		</Link>
	)
}