import type { Meta, StoryObj } from "@storybook/react";
import { type Tab, Tabs } from "@tpmjs/ui/Tabs/Tabs";
import { createElement } from "react";

const meta = {
	title: "Components/Tabs",
	component: Tabs,
	tags: ["autodocs"],
	parameters: {
		layout: "centered",
	},
} satisfies Meta<typeof Tabs>;

export default meta;
type Story = StoryObj<typeof meta>;

const mockTabs: Tab[] = [
	{ id: "overview", label: "Overview" },
	{ id: "usage", label: "Usage" },
	{ id: "api", label: "API" },
];

export const Default: Story = {
	render: () =>
		createElement(Tabs, {
			tabs: mockTabs,
			activeTab: "overview",
			onTabChange: (id: string) => console.log("Tab changed:", id),
		}),
};

export const AllSizes: Story = {
	render: () =>
		createElement(
			"div",
			{ className: "flex flex-col gap-8 w-full" },
			createElement(Tabs, {
				tabs: mockTabs,
				activeTab: "overview",
				size: "sm",
				onTabChange: () => {},
			}),
			createElement(Tabs, {
				tabs: mockTabs,
				activeTab: "overview",
				size: "md",
				onTabChange: () => {},
			}),
			createElement(Tabs, {
				tabs: mockTabs,
				activeTab: "overview",
				size: "lg",
				onTabChange: () => {},
			}),
		),
};

export const WithCounts: Story = {
	render: () =>
		createElement(Tabs, {
			tabs: [
				{ id: "all", label: "All Tools", count: 1234 },
				{ id: "featured", label: "Featured", count: 42 },
				{ id: "recent", label: "Recent", count: 18 },
			],
			activeTab: "all",
			onTabChange: () => {},
		}),
};

export const ManyTabs: Story = {
	render: () =>
		createElement(
			"div",
			{ className: "w-96" },
			createElement(Tabs, {
				tabs: [
					{ id: "tab1", label: "Overview" },
					{ id: "tab2", label: "Documentation" },
					{ id: "tab3", label: "Examples" },
					{ id: "tab4", label: "API Reference" },
					{ id: "tab5", label: "Configuration" },
					{ id: "tab6", label: "Changelog" },
					{ id: "tab7", label: "Contributing" },
				],
				activeTab: "tab1",
				onTabChange: () => {},
			}),
		),
};