"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-green-600 text-white px-4 py-2 rounded-lg font-bold w-auto text-center"
            >
              Buy | ${props.storeItem.price}
            </button>
          </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>
      <div className="flex flex-grow mt-4">
        <div className="mr-3 flex-grow">
          <p className="font-bold">Yield</p>
          <p className="">{props.storeItem.claimAmount}</p>
        </div>
        <div className="mr-3 flex-grow">
          <p className="font-bold">Completion Time</p>
          <p className="">{props.storeItem.completionTimeInMins} min</p>
        </div>
        <div className="mr-3 flex-grow">
          <p className="font-bold">Yield / Hr.</p>
          <p className="">
            {(
              (props.storeItem.claimAmount /
                props.storeItem.completionTimeInMins) *
              60
            ).toFixed(0)}
          </p>
        </div>
      </div>
      <p className="font-bold mt-4  ">Tiers</p>
      <div className="mt-4 flex f-full">
        {props.storeItem.upgrades.map((upgrade, id) => (
          <table key={id} className="table-auto flex-grow">
            <tr className="border">
              <td colSpan={2} className="p-2 text-center">
                {upgrade.tier}
              </td>
            </tr>
            <tr>
              <td className="p-2 border">${upgrade.price}</td>
              <td className="p-2 border">+{upgrade.claimBoost}</td>
            </tr>
          </table>
        ))}
      </div>
    </CardLayout>
  );
};

export default StoreItem;
