import type { Meta, StoryObj } from "@storybook/preact";
import { TopBar } from "./TopBar";
import { useState } from "preact/hooks";

const meta: Meta<typeof TopBar> = { title: "Layouts/TopBar", component: TopBar };
export default meta;
type Story = StoryObj<typeof TopBar>;

export const WithTabs: Story = {
  render: () => {
    const [current, setCurrent] = useState("Clients");
    return (
      <TopBar
        appName="My CRM"
        appIcon="💼"
        current={current}
        onSelect={setCurrent}
        tabs={[
          { name: "Clients", icon: "👥", badge: 12 },
          { name: "Deals", icon: "🤝" },
          { name: "Dashboard", icon: "📊" },
        ]}
      />
    );
  },
};

export const SidebarMode: Story = {
  render: () => <TopBar appName="My CRM" hideTabs />,
};
