import { storiesOf } from "@storybook/react";
import "../assets/css/main-theme.css";
import { AccountSummary } from "../components/AccountSummary";

const stories = storiesOf("AccountSummary", module);

import { EarnIcon } from "../assets/svgs";

const stakersInfo = {
  currentStake: 0,
  earn: 0,
  claimedReward: 0,
  walletBalance: 0,
  totalStaked: 0,
  totalUnstaked: 0,
};

const accountSummaryData = [
  [
    {
      icon: <EarnIcon />,
      title: "Current Stake",
      value: stakersInfo?.currentStake,
    },
    {
      icon: <EarnIcon />,
      title: "Earn",
      value: stakersInfo?.earn,
    },
    {
      icon: <EarnIcon />,
      title: "Claimed Reward",
      value: stakersInfo?.claimedReward,
    },
  ],
  [
    {
      icon: <EarnIcon />,
      title: "Your Wallet Balance",
      value: stakersInfo?.walletBalance,
    },
    {
      icon: <EarnIcon />,
      title: "Total Staked",
      value: stakersInfo?.totalStaked,
    },
    {
      icon: <EarnIcon />,
      title: "Total Unstaked",
      value: stakersInfo?.totalUnstaked,
    },
  ],
];

stories.add("AccountSummary", () => {
  return (
    <div>
      <AccountSummary data={accountSummaryData} />
    </div>
  );
});
