import type { Meta, StoryObj } from "@storybook/react-vite";
import { Plus, Download } from "lucide-react";

import { PageHeader } from "./page-header";
import { Button } from "@/components/ui/button";

const meta = {
  title: "UI Library/PageHeader",
  component: PageHeader,
  tags: ["autodocs"],
  parameters: { layout: "padded" },
} satisfies Meta<typeof PageHeader>;

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

export const Default: Story = {
  args: {
    eyebrow: "Workspace",
    title: "Projects",
    description: "Manage and organize all of your team's projects.",
  },
  render: (args) => (
    <div className="w-full max-w-3xl">
      <PageHeader
        {...args}
        actions={
          <>
            <Button variant="outline">
              <Download /> Export
            </Button>
            <Button>
              <Plus /> New
            </Button>
          </>
        }
      />
    </div>
  ),
};

export const TitleOnly: Story = {
  args: { title: "Settings" },
  render: (args) => (
    <div className="w-full max-w-3xl">
      <PageHeader {...args} />
    </div>
  ),
};