import { Story, Meta } from "@storybook/react";
import { HeaderDocs } from "./ListDocs";

import List from "../List";
import { ListProps } from "../types";
import React from "react";
import { StoryLayout } from "../../../../.storybook/StoryComponents";

export default {
  title: "Atoms/List",
  component: List,
  parameters: {
    docs: {
      page: HeaderDocs,
    },
  },
} as Meta;

export const Default: Story<ListProps> = args => {
  const data = [
    "Racing car sprays burning fuel into crowd.",
    "Japanese princess to wed commoner.",
    "Australian walks 100km after outback crash.",
    "Man charged over missing wedding girl.",
    "Los Angeles battles huge wildfires.",
  ];

  return (
    <StoryLayout>
      <List dataSource={data} type={args.type} />
    </StoryLayout>
  );
};

Default.argTypes = {
  type: {
    options: ["ol", "ul"],
    control: { type: "radio" },
  },
};