"use client"

import { useState } from "react"
import { Checkbox } from "./ui/checkbox"
import { Button } from "./ui/button"
import { Minus, Plus, Heart, Trash } from 'lucide-react'
import Image from "next/image"

const SAMPLE_ITEMS = [
  {
    id: 1,
    name: "Бумага офисная SvetoCopy, 500 листов, А4",
    price: 352,
    oldPrice: 399,
    image: "/placeholder.svg",
  },
  {
    id: 2,
    name: "Глюкометр Диаконт Концепт + тест-полоски",
    price: 1450,
    oldPrice: 1599,
    image: "/placeholder.svg",
  }
]

export function CartItems() {
  const [selectedItems, setSelectedItems] = useState<number[]>([])

  const toggleItem = (id: number) => {
    setSelectedItems(prev => 
      prev.includes(id) 
        ? prev.filter(item => item !== id)
        : [...prev, id]
    )
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2 mb-4">
        <Checkbox 
          checked={selectedItems.length === SAMPLE_ITEMS.length}
          onCheckedChange={(checked) => {
            setSelectedItems(checked ? SAMPLE_ITEMS.map(item => item.id) : [])
          }}
        />
        <span>Выбрать все</span>
        {selectedItems.length > 0 && (
          <button className="text-red-500 ml-4 hover:underline">
            Удалить выбранные
          </button>
        )}
      </div>
      {SAMPLE_ITEMS.map((item) => (
        <div key={item.id} className="flex gap-4 p-4 bg-white rounded-lg">
          <Checkbox 
            checked={selectedItems.includes(item.id)}
            onCheckedChange={() => toggleItem(item.id)}
          />
          <Image
            src={item.image}
            alt={item.name}
            width={100}
            height={100}
            className="object-cover"
          />
          <div className="flex-1">
            <h3 className="font-medium">{item.name}</h3>
            <div className="flex gap-4 mt-4">
              <div className="flex items-center gap-2">
                <Button variant="outline" size="icon">
                  <Minus className="h-4 w-4" />
                </Button>
                <span className="w-8 text-center">1</span>
                <Button variant="outline" size="icon">
                  <Plus className="h-4 w-4" />
                </Button>
              </div>
              <Button variant="ghost" size="icon">
                <Heart className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="icon">
                <Trash className="h-4 w-4" />
              </Button>
            </div>
          </div>
          <div className="text-right">
            <div className="text-lg font-bold">{item.price} ₽</div>
            <div className="text-sm text-muted-foreground line-through">
              {item.oldPrice} ₽
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}