import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { DisplayCard } from "@/definitions/cards"
import TabListCard from "./TabListCard.vue"
import { componentDoc } from "@/lib/storybook"

function child(id: string, title: string): DisplayCard {
  return {
    id,
    cardType: "element-list",
    elementList: [],
    title,
  } as unknown as DisplayCard
}

const meta = {
  title: "Cards/TabListCard",
  component: TabListCard,
  tags: ["autodocs"],
  parameters: componentDoc("TabListCard", { barrel: "cards" }),
  args: {
    tabs: [child("t1", "General"), child("t2", "Advanced")],
    item: {},
  },
} satisfies Meta<typeof TabListCard>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {},
}

export const WithMultipleChildren: Story = {
  args: {
    tabs: [
      child("t1", "General"),
      child("t2", "Branding"),
      child("t3", "Permissions"),
      child("t4", "Notifications"),
    ],
    style: "horizontal",
  },
}

export const Showcase: Story = {
  args: {
    title: "Settings",
    subtitle: "Configure every aspect of your project",
    tabs: [
      child("general", "General"),
      child("billing", "Billing"),
      child("team", "Team"),
    ],
    style: "horizontal",
  },
}
