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

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

export const Template = (args) => (
    <StatBlockContainer colour={args.colour} loading={false}>
        {Array(args.numberOfStats).fill(
            <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={{
            numberOfStats: 3,
            value: 100,
            title: "Example",
            icon: "",
            description: "",
            percentage: 100,
            isPercentage: false,
            colour: "Primary",
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>