import React from "react";
import { List, ListProps } from "./List";
import { ListItem } from "./ListItem";
import { ListTitle } from "./ListTitle";
import { Story, Meta } from "@storybook/react";

export default {
	title: "Components/List",
	component: List,
} as Meta;

const items = [
	{
		iconBg: "red.400",
		title: "Interface",
		description: "Button, Input, Toggle",
		value: "interface",
	},
	{
		icon: "B",
		iconBg: "pink.400",
		title: "Market",
		description: "Subscription, Fidelity",
		value: "market",
	},
	{
		icon: "C",
		iconBg: "cyan.400",
		title: "Media",
		description: "Audio, Video, Images",
		value: "media",
		disabled: true,
	},
];

const Template: Story<ListProps> = (args) => (
	<List {...args}>
		<ListTitle>Title</ListTitle>
		{items.map((item) => (
			<ListItem
				key={item.value}
				title={item.title}
				description={item.description}
				isDisabled={item.disabled}
				icon={item.icon}
				iconBg={item.iconBg}
				onClick={() => console.log(item.value)}
			/>
		))}
	</List>
);

export const Primary = Template.bind({});

Primary.args = {};