'use client';

import { FC } from 'react';
import { IShopItem } from '@/api/shop-item.api';
import styles from '@/components/shop/Shop.module.css';
import Image from 'next/image';
import { IHandleOpen } from '@/components/shop/ShopContainer';

interface IShopItemProps {
    shopItem: IShopItem;
    handleOpen: (data: IHandleOpen) => void;
}

const ShopItem: FC<IShopItemProps> = ({ shopItem, handleOpen }) => {
    return (
        <div
            className={styles.item}
            onClick={() =>
                handleOpen({
                    image: `${process.env.NEXT_PUBLIC_STRAPI || ''}${shopItem.attributes.icon.data.attributes.url}`,
                    isDecimal: shopItem.attributes.isDecimal,
                    priceItem: shopItem.attributes.price,
                    shopItem: shopItem.id,
                })
            }
        >
            {shopItem?.attributes?.icon?.data && (
                <div className={styles.item_img}>
                    <img
                        loading={'lazy'}
                        src={`${process.env.NEXT_PUBLIC_STRAPI || ''}${shopItem.attributes.icon.data.attributes.url}`}
                        alt={'shop item icon'}
                    />
                </div>
            )}
            <div className={styles.itemInfo}>
                <div className={styles.itemInfoTitle}>
                    <span>{shopItem.attributes.name}</span>
                </div>
                <div className={styles.itemInfoContent}>
                    <span>{shopItem.attributes.price}</span>
                    <Image
                        src={'/icons/small-robucks-icon.svg'}
                        alt={'small robucks'}
                        width={18}
                        height={18}
                    />
                    <span>=</span>
                    <span>1</span>
                    <div className={styles.item_img_sm}>
                        <img
                            loading={'lazy'}
                            src={`${process.env.NEXT_PUBLIC_STRAPI || ''}${shopItem.attributes.icon.data.attributes.url}`}
                            alt={'small coin icon'}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ShopItem;