"use client";
import React from "react";
import { IStoreItem } from "typings";
import CardLayout from "../../Layouts/CardLayout";
import Image from "next/image";

const StoreItem = (props: {
  storeItem: IStoreItem;
  buyStoreItem: (storeItemId: number) => void;
}) => {
  return (
    <CardLayout>
      <div className="md: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-auto 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={"/assets/items/" + props.storeItem.image}
            alt={props.storeItem.name}
            fill
            className="rounded-lg border border-white/20 shadow-lg object-contain mt-4 md:mt-0"
          />
        </div>
      </div>
    </CardLayout>
  );
};

export default StoreItem;
