import type { Meta, StoryObj } from '@storybook/react'
import { PageHeader } from './PageHeader'

const GridIcon = () => (
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M3 3h8v8H3zm0 10h8v8H3zm10-10h8v8h-8zm0 10h8v8h-8z" />
  </svg>
)

const BookIcon = () => (
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z" />
  </svg>
)

const meta: Meta<typeof PageHeader> = {
  title: 'Organisms/PageHeader',
  component: PageHeader,
  tags: ['autodocs'],
  parameters: { layout: 'fullscreen' },
}

export default meta
type Story = StoryObj<typeof PageHeader>

export const Light: Story = {
  render: () => (
    <PageHeader
      title="Resources"
      subtitle="Essential resources for my work"
      icon={<GridIcon />}
    />
  ),
}

export const Dark: Story = {
  render: () => (
    <PageHeader
      title="Resources"
      subtitle="Essential resources for my work"
      icon={<GridIcon />}
      theme="dark"
    />
  ),
}

export const NoIcon: Story = {
  name: 'No icon',
  render: () => (
    <PageHeader
      title="My Documents"
      subtitle="View and manage your uploaded documents"
    />
  ),
}

export const Centered: Story = {
  render: () => (
    <PageHeader
      title="Welcome to your PDP"
      subtitle="Performance and Development Plan portal"
      icon={<BookIcon />}
      centered
    />
  ),
}

export const NoBackground: Story = {
  name: 'No background',
  render: () => (
    <PageHeader
      title="Settings"
      subtitle="Manage your account preferences"
      noBackground
    />
  ),
}

export const WithContent: Story = {
  name: 'With content slot',
  render: () => (
    <PageHeader
      title="Resources"
      subtitle="Essential resources for my work"
      icon={<GridIcon />}
    >
      <div className="flex gap-2">
        <button className="rounded-full bg-primary px-5 py-2 text-small font-semibold text-white">
          Browse all
        </button>
        <button className="rounded-full border-2 border-primary px-5 py-2 text-small font-semibold text-primary">
          My favourites
        </button>
      </div>
    </PageHeader>
  ),
}