// import styles from '@/components/pages/cart/cart.module.scss'
import {Minus, Plus} from 'lucide-react'
import Image from 'next/image'

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

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 > 0) {
		return (
			<>
				{cartItems?.map((item: CartItem, i: number) => (
					<div className='my-4 flex items-center' key={i}>
						<div className='col'>
							{item.title}
							<Image
								src={(item?.image || '').replace('.jpg', '-thumb.jpg')}
								alt=''
								width={96}
								height={96}
								className='rounded-md border'
								style={{
									width: '96px',
									height: '96px',
									objectFit: 'cover'
								}}
							/>
						</div>
						<div className='flex-none'>
							<div className='flex w-16 flex-none items-center justify-center'>
								<Button
									variant={'outline'}
									className='rounded-0 h-[3rem] w-[3rem] text-2xl leading-none text-brand-violet'
									onClick={() => onDecreaseQuantity(item.id)}
								>
									<Minus />
								</Button>
								<div className='mx-4 text-xl font-bold leading-none text-brand-violet'>
									{item.quantity}
								</div>
								<Button
									variant={'outline'}
									className='rounded-0 h-[3rem] w-[3rem] text-2xl leading-none text-brand-violet'
									onClick={() => onIncreaseQuantity(item.id)}
								>
									<Plus />
								</Button>
							</div>
						</div>
						<div className='col text-right text-lg font-bold'>
							{(item.price * item.quantity).toFixed(2)} грн
						</div>
					</div>
				))}
			</>
		)
	}
	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={'/catalog'}
				className='rounded-md bg-orange-500 px-6 py-2 text-white'
			>
				Продовжити покупки
			</Link>
		</div>
	)
}
