"use client";
import React, { useState } from "react";
import { IStoreItem } from "typings";
import CommonCardLayout from "../Layouts/CommonCardLayout";
import Chart from "./Chart";
import Image from "next/image";

const StoreItem = (props: {
  storeItem: IStoreItem;
  buyStoreItem: (itemId: string) => void;
}) => {
  return (
    <CommonCardLayout>
      <div className="flex ">
        <div className="flex-1 pr-4 mr-4">
          <h3 className="text-2xl font-bold mb-2">{props.storeItem.name}</h3>
          <p className="text-sm mb-3">{props.storeItem.description}</p>
          <div className="py-4 my-2">
            <button
              onClick={() => props.buyStoreItem(props.storeItem.id)}
              className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center"
            >
              Buy | ${props.storeItem.price}
            </button>
          </div>
          <div className="flex">
            <div className="mr-3">
              <p className="font-bold">Base Yield</p>
              <p className="">{props.storeItem.claimAmount}</p>
            </div>
            <div className="">
              <p className="font-bold">Upgrades</p>
              {props.storeItem.upgrades.map((upgrade, id) => (
                <span key={id} className="mr-2">
                  {upgrade.claimBoost}
                </span>
              ))}
            </div>
          </div>
        </div>
        <div className="relative object-contain w-48 h-48">
          <Image
            src={props.storeItem.image}
            alt={props.storeItem.name}
            fill
            className="rounded-lg border border-white/20 shadow-lg object-contain"
          />
        </div>
      </div>
    </CommonCardLayout>
  );
};

export default StoreItem;