import React from 'react';
import { Meta, Story } from '@storybook/react/types-6-0';
import { BigIconDisplay, BigIconDisplayProps } from '.';
import * as Icons from '../../assets/images/icons';
import { styled, theme } from '../..';

export default {
  title: 'BigIconDisplay',
  component: BigIconDisplay,
} as Meta;

const Gray2Span = styled.span`
  color: ${theme.colors.gray[2]};
`;

const Template: Story<BigIconDisplayProps> = (args) => (
  <BigIconDisplay {...args} />
);

export const Default = Template.bind({});
Default.args = {
  icon: Icons.SvgAccountGroup,
  label: 'Total tokenholders',
  children: 12,
} as BigIconDisplayProps;

export const TotalSupply = Template.bind({});
TotalSupply.args = {
  icon: Icons.SvgCoins,
  label: 'Total supply',
  children: (
    <>
      10033.22 <Gray2Span>POLYX</Gray2Span>
    </>
  ),
} as BigIconDisplayProps;
