import type { Meta, StoryObj } from "@storybook/preact";
import { TabContainer } from "./TabContainer";

const meta: Meta<typeof TabContainer> = { title: "Primitives/TabContainer", component: TabContainer, argTypes: { style: { control: "radio", options: ["line", "button"] } } };
export default meta;
type Story = StoryObj<typeof TabContainer>;

const tabs = [
  { label: "Overview", icon: "📊", content: <p class="text-sm" style={{ color: "var(--z-muted)" }}>Overview content here.</p> },
  { label: "Details", icon: "📋", content: <p class="text-sm" style={{ color: "var(--z-muted)" }}>Detailed info goes here.</p> },
  { label: "History", icon: "🕐", content: <p class="text-sm" style={{ color: "var(--z-muted)" }}>Activity history.</p> },
];

export const Line: Story = { args: { tabs, style: "line" } };
export const ButtonStyle: Story = { args: { tabs, style: "button" } };
