'use client'

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

import {dump} from '@/lib/utils'
import useCartStore, {CartItem} from '@/store/cart-store'

export default function AddCartButton({product}: {product: CartItem}) {
	const t = useTranslations('cart')
	const addItemToCart = useCartStore(state => state.addItemToCart)
	const {cartItems} = useCartStore(state => state)

	return (
		<>
			<button
				className='flex flex-col items-center'
				role='button'
				title={t('basket')}
				onClick={() => addItemToCart(product)}
			>
				<ShoppingCartIcon className='h-[21px] w-[21px]' />
			</button>

			<pre>{dump(cartItems)}</pre>
		</>
	)
}