import type { Meta, StoryObj } from '@storybook/react';
import { PageHeader, PageHeaderHeading, PageHeaderDescription } from './page-header';
import { Plus, Download, Mail } from 'lucide-react';
import { Button } from '../button';
import React from 'react';

const meta: Meta<typeof PageHeader> = {
  title: 'UI/PageHeader',
  component: PageHeader,
  render: args => <PageHeader {...args} />,
  parameters: {
    layout: 'padded',
  },
};

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

export const Default: Story = {
  args: {
    title: 'User Management',
    subtitle: 'View and manage team member permissions.',
  },
};

export const WithBackButton: Story = {
  args: {
    title: 'Edit Profile',
    subtitle: 'Update your personal information and preferences.',
    backHref: '/users',
  },
};

export const WithActions: Story = {
  args: {
    title: 'Sales Report',
    subtitle: 'Detailed analysis of commercial performance for the last quarter.',
    actions: (
      <>
        <Button variant="outline" size="sm" className="gap-2">
          <Download className="h-4 w-4" /> Export
        </Button>
        <Button size="sm" className="gap-2">
          <Plus className="h-4 w-4" /> New Record
        </Button>
      </>
    ),
  },
};

export const Compact: Story = {
  args: {
    title: 'Settings',
    onBack: () => alert('Going back...'),
    actions: <Button size="sm">Save Changes</Button>,
  },
};

export const Typography: Story = {
  render: () => (
    <div className="space-y-4 max-w-2xl">
      <PageHeaderHeading>Demo Page</PageHeaderHeading>
      <PageHeaderDescription>
        This is an example description using the PageHeaderDescription component, maintaining
        typographic consistency across the entire system.
      </PageHeaderDescription>
    </div>
  ),
};