'use client'

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

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

export default function HeaderShoppingCartIcon() {
	const t = useTranslations('Common')
	const {cartItems} = useCartStore()
	const cartCount = cartItems.reduce(
		(accumulator: number, item: CartItem) => accumulator + item.quantity,
		0
	)

	return (
		<Link
			href={'/cart' as never}
			className='header-button relative'
			aria-label={t('basket')}
		>
			<button className='flex flex-col items-center' role='button'>
				<ShoppingCartIcon className='h-[21px] w-[21px]' />

				{cartCount > 0 && (
					<div className='absolute -right-1 -top-1 h-[20px] w-[20px] rounded-full border border-brand-violet bg-brand-yellow pl-0 pr-[1px] text-[0.625rem] font-bold leading-[18px]'>
						{cartCount}
					</div>
				)}
			</button>
		</Link>
	)
}