import React from "react";
import { StoryFn, StoryObj, Meta } from "@storybook/react";
import { Root } from "../index";
import { IncomeBracketsChart } from ".";
import { IncomeBracketsChartProps } from "./types";

const defaultExport: Meta<typeof Root> = {
  title: "Unofficial/Demographics/IncomeBracketsChart",
  component: Root,
};

export default defaultExport;

const labels = [
  "$0 – $9,000",
  "$10,000 – $19,000",
  "$20,000 – $34,000",
  "$35,000 – $49,000",
  "$50,000 – $74,000",
];

const IncomeBracketsChartTemplate: StoryFn<typeof IncomeBracketsChart> = (
  args
) => <IncomeBracketsChart {...args} />;

export const Primary: StoryObj<IncomeBracketsChartProps> =
  IncomeBracketsChartTemplate.bind({});
Primary.args = {
  options: {
    labels,
    data: labels.map(() => Math.floor(Math.random() * 1000)),
  },
};