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

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

const labels = [
  "English",
  "French",
  "Mandarin",
  "Italian",
  "Spanish",
  "German",
  "Japanese",
  "Hindi",
  "Portuguese",
];

const MotherTongueChartTemplate: StoryFn<typeof MotherTongueChart> = (args) => (
  <MotherTongueChart {...args} />
);

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

export default MotherTongueChartExport;