'use client'

import {useTranslations} from 'next-intl'

import CartItems from '@/components/pages/cart/items'
import useCartStore from '@/store/cart-store'

export default function Cart() {
	const t = useTranslations('cart')
	const {cartItems} = useCartStore()
	const totalSum = cartItems.reduce(
		(total, product) => total + parseFloat(product.price) * product.quantity,
		0
	)

	// const subtotal = items.reduce(
	// 	(total, item) => total + item.price * item.quantity,
	// 	0
	// )
	// const total = subtotal

	return (
		<div className='mt-1'>
			<div className='container'>
				<section className='bw-cart-wrapper mx-auto my-8 max-w-[640px] text-brand-violet'>
					<h1 className='mb-6 border-b border-b-brand-violet pb-6 text-3xl font-bold'>
						{t('basket')}
					</h1>
					<header className='flex text-xl'>
						<div className='col'>{t('title')}</div>
						<div className='flex-none'>{t('quantity')}</div>
						<div className='col text-right'>{t('amount')}</div>
					</header>
					<CartItems />
					<footer className='my-8 flex border-y border-y-brand-violet py-4 text-xl'>
						<div className='col'></div>
						<div className='flex-none'>{t('total')}:</div>
						<div className='col text-right font-bold'>
							{totalSum.toFixed(2)} грн
						</div>
					</footer>
				</section>
			</div>
		</div>
	)
}