import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { TabMenu, TabMenuProps } from "./TabMenu"

type Story = StoryObj<typeof TabMenu>

const meta: Meta<typeof TabMenu> = {
  title: "Design System/TabMenu",
  component: TabMenu,
}

export default meta

const items = ["Top", "Trending", "Watchlist", "Firehose"]

const Template = (args: TabMenuProps) => {
  const [activeItem, setActiveItem] = useState(items[0])

  return (
    <>
      <TabMenu {...args}>
        {items.map(item => (
          <TabMenu.Item
            active={item === activeItem}
            disabled={item === "Firehose"}
            key={item}
            onClick={() => setActiveItem(item)}
          >
            <TabMenu.Item.Title>{item}</TabMenu.Item.Title>
          </TabMenu.Item>
        ))}
        <TabMenu.Item href="more">
          <TabMenu.Item.Title>More</TabMenu.Item.Title>
        </TabMenu.Item>
      </TabMenu>
    </>
  )
}

export const Default: Story = {
  render: Template,
}