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

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

const FamiliesWithChildrenCardTemplate: StoryFn<
  typeof FamiliesWithChildrenCard
> = (args) => (
  <Root>
    <FamiliesWithChildrenCard {...args} />
  </Root>
);

export const Primary: StoryObj<FamiliesWithChildrenCardProps> =
  FamiliesWithChildrenCardTemplate.bind({});
Primary.args = {
  options: {
    labels: [
      "63% No Children",
      "24% 1 Child",
      "9% 2 Children",
      "4% 3 or More Children",
    ],
    data: [63, 24, 9, 4],
  },
};

export default familyCompositionCardExport;