// import styles from '@/components/pages/cart/cart.module.scss'
import Link from 'next/link'

import useCartStore from '@/store/cart-store'
import {Button} from '@/ui/button'
import {Input} from '@/ui/input'

export default function CartItems() {
	const {cartItems} = useCartStore()

	const {increaseQuantity, decreaseQuantity, removeItemFromCart} =
		useCartStore()
	const onIncreaseQuantity = (productId: number) => {
		increaseQuantity(productId)
	}

	const onDecreaseQuantity = (productId: number) => {
		decreaseQuantity(productId)
	}

	const onRemoveItem = (productId: number) => {
		removeItemFromCart(productId)
	}

	if (cartItems && cartItems.length < 1) {
		return (
			<div className='flex h-72 flex-col items-center justify-center'>
				<h2 className='mb-5 mt-10 text-3xl font-bold'>Cart is Empty</h2>
				<Link
					href={'/products'}
					className='rounded-md bg-orange-500 px-6 py-2 text-white'
				>
					Shop
				</Link>
			</div>
		)
	}

	return (
		<>
			{cartItems?.map((item, i) => (
				<div
					key={i}
					className='bsdg-brand-violet-200 bw-cart-item-counter my-4 flex items-center gap-4 py-4'
				>
					<div className='flex-auto bg-brand-violet-100'>{item.title}</div>
					<div className='flex w-16 flex-none items-center justify-center'>
						<Button
							variant={'outline'}
							className='rounded-0'
							onClick={() => onDecreaseQuantity(item.id)}
						>
							-
						</Button>
						<div className='mx-4 border-0 text-xl font-bold leading-none text-brand-violet'>
							{item.quantity}
						</div>
						<Button
							variant={'outline'}
							className='rounded-0'
							onClick={() => onIncreaseQuantity(item.id)}
						>
							+
						</Button>
					</div>

					<div className='text-3 flex-auto text-right font-bold'>
						{(item.price * item.quantity).toFixed(2)} грн
					</div>
				</div>
			))}
		</>
	)
}