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

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

export default function CartItems({cartItems}: {cartItems: CartItem[]}) {
	const {increaseQuantity, decreaseQuantity, removeItemFromCart} =
		useCartStore()

	const onIncreaseQuantity = (productId: number) => {
		increaseQuantity(productId)
	}

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

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

	return (
		<>
			{cartItems?.map((item: CartItem, i: number) => (
				<article key={i} className='bxg-emerald-200 mb-6'>
					<h3 className='bxg-brand-yellow-300 flex w-full items-center justify-between text-foreground'>
						<div className='text-lg font-medium'>{item.title}</div>
						<div className='w-16 flex-none text-right'>
							<Button
								variant={'ghost'}
								className='rounded-0 h-[3rem] w-[3rem] px-0 text-brand-violet'
								onClick={() => onRemoveItem(item.id)}
								/*title={t('clear_cart')}*/
							>
								<X />
							</Button>
						</div>
					</h3>
					<div className='flex items-center'>
						<div className='col'>
							<Image
								src={(item?.image || '').replace('.jpg', '-thumb.jpg')}
								alt=''
								width={64}
								height={64}
								style={{
									width: '64px',
									height: '64px',
									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-brand-violet'
									onClick={() => onDecreaseQuantity(item.id)}
								>
									<Minus />
								</Button>
								<div className='mx-4 text-xl font-bold text-brand-violet'>
									{item.quantity}
								</div>
								<Button
									variant={'outline'}
									className='rounded-0 h-[3rem] w-[3rem] 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>
				</article>
			))}
		</>
	)
}