'use client';

import React from 'react';
import { Box, SimpleGrid, Button, Text, Image, useToast } from '@chakra-ui/react';
import { IShopItem } from '../../backend/models/ShopItem';

interface ShopProps {
  items: IShopItem[];
  userBalance: number;
  onPurchase: (item: IShopItem) => Promise<void>;
}

export function Shop({ items, userBalance, onPurchase }: ShopProps) {
  const toast = useToast();

  const handlePurchase = async (item: IShopItem) => {
    if (userBalance < item.price) {
      toast({
        title: 'Недостаточно средств',
        description: `Для покупки ${item.name} нужно ${item.price} монет`,
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
      return;
    }

    await onPurchase(item);
  };

  return (
    <Box w="100%">
      <Text fontSize="2xl" mb={4}>Магазин</Text>
      <Text mb={4}>Ваш баланс: {userBalance} монет</Text>
      <SimpleGrid columns={[1, 2, 3]} spacing={6}>
        {items.map((item) => (
          <Box
            key={item._id.toString()}
            borderWidth="1px"
            borderRadius="lg"
            overflow="hidden"
            p={4}
          >
            {item.imageUrl && (
              <Image
                src={item.imageUrl}
                alt={item.name}
                height="200px"
                width="100%"
                objectFit="cover"
                mb={4}
              />
            )}
            <Text fontSize="xl" mb={2}>{item.name}</Text>
            <Text mb={2}>{item.description}</Text>
            <Text mb={4} color="green.500">{item.price} монет</Text>
            <Button
              colorScheme="blue"
              onClick={() => handlePurchase(item)}
              isDisabled={userBalance < item.price}
              w="100%"
            >
              Купить
            </Button>
          </Box>
        ))}
      </SimpleGrid>
    </Box>
  );
}