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

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

export const Default: Story = {
  render: () => {
    const [current, setCurrent] = useState("Clients");
    return (
      <div style={{ height: 400 }}>
        <Sidebar
          appName="My CRM"
          appIcon="💼"
          current={current}
          onSelect={setCurrent}
          tabs={[
            { name: "Clients", icon: "👥", badge: 12 },
            { name: "Deals", icon: "🤝", badge: 5 },
            { name: "Activities", icon: "📋" },
            { name: "Dashboard", icon: "📊" },
          ]}
        />
      </div>
    );
  },
};
