import { Button } from '@mantine/core'
import { Plus } from 'lucide-react'
import type { Story, StoryMeta } from './csf.types'
import { PageHeader } from './PageHeader'

const meta: StoryMeta = {
  title: 'PageHeader',
  component: PageHeader,
  tags: ['layout'],
  argTypes: {
    title: { description: 'Page title', control: 'text' },
    description: { description: 'Optional sub-text', control: 'text' },
    actions: { description: 'Right-aligned actions slot', control: false },
  },
}
export default meta

function DefaultStory() {
  return <PageHeader title="Tasks" description="Everything on your plate, in one place." />
}
export const Default: Story = { render: DefaultStory }

function WithActionStory() {
  return (
    <PageHeader
      title="Tasks"
      description="Everything on your plate, in one place."
      actions={<Button leftSection={<Plus size={16} />}>New task</Button>}
    />
  )
}
export const WithAction: Story = { render: WithActionStory }