import { Stat, StatBlockContainer } from "ui";
import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";

<Meta title="Components/Data/Stat" component={Stat} />

export const Template = (args) => (
  <StatBlockContainer colour={args.colour} loading={false}>
    <Stat
      value={args.value}
      title={args.title}
      icon={args.icon !== "" ? args.icon : undefined}
      description={args.description}
      percentage={args.isPercentage ? args.percentage : undefined}
      colour={args.colour}
    />
  </StatBlockContainer>
);

# Stat

Description of a stat

## Props

<ArgsTable story="Default" />

## Examples

<Canvas>
  <Story
    name="Default"
    args={{
      value: 100,
      title: "Example",
      icon: "",
      description: "",
      percentage: 0.5,
      isPercentage: false,
      colour: "Primary",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>