import React from "react";
import { StoryFn, StoryObj, Meta } from "@storybook/react";
import { Root, PopulationByAgeChart } from "../index";
import { type PopulationByAgeChartProps } from "./types";

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

export default defaultExport;

const labels = [
  "0 – 4",
  "5 – 9",
  "10 – 14",
  "15 – 19",
  "20 – 34",
  "35 – 49",
  "50 – 65",
  "66 – 79",
  "80 and over",
];

const PopulationByAgeChartTemplate: StoryFn<typeof PopulationByAgeChart> = (
  args
) => <PopulationByAgeChart {...args} />;

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