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

import { Hero } from '@/components/ui/hero'
import { Button } from '@/components/ui/button'

const meta = {
  title: 'Composition/Hero',
  component: Hero,
  tags: ['autodocs'],
  parameters: { layout: 'fullscreen' },
  argTypes: {
    variant: {
      control: 'select',
      options: ['centered', 'left-aligned', 'split'],
    },
    background: {
      control: 'select',
      options: ['default', 'muted', 'accent', 'dark'],
    },
  },
} satisfies Meta<typeof Hero>

export default meta
type Story = StoryObj<typeof meta>

const defaultActions = (
  <>
    <Button size="lg">Get Started</Button>
    <Button size="lg" variant="outline">Learn More</Button>
  </>
)

export const Centered: Story = {
  args: {
    variant: 'centered',
    heading: 'Build better products with Greyhaven',
    subheading:
      'A modern design system that helps you create consistent, accessible, and beautiful user interfaces.',
    actions: defaultActions,
  },
}

export const LeftAligned: Story = {
  args: {
    variant: 'left-aligned',
    heading: 'Ship faster with confidence',
    subheading:
      'Pre-built components, design tokens, and patterns so your team can focus on what matters.',
    actions: defaultActions,
  },
}

export const Split: Story = {
  args: {
    variant: 'split',
    heading: 'Design meets engineering',
    subheading:
      'Bridging the gap between design and code with a shared language of components and tokens.',
    actions: defaultActions,
    media: (
      <div className="w-full aspect-video bg-muted rounded-lg flex items-center justify-center text-muted-foreground">
        Image / Media Placeholder
      </div>
    ),
  },
}

export const MutedBackground: Story = {
  args: {
    variant: 'centered',
    background: 'muted',
    heading: 'Welcome to the platform',
    subheading: 'Everything you need to build and scale your project.',
    actions: defaultActions,
  },
}

export const AccentBackground: Story = {
  args: {
    variant: 'centered',
    background: 'accent',
    heading: 'Start building today',
    subheading: 'Join thousands of developers using our design system.',
    actions: defaultActions,
  },
}

export const DarkBackground: Story = {
  args: {
    variant: 'centered',
    background: 'dark',
    heading: 'The future of design systems',
    subheading: 'A bold new approach to building consistent user interfaces at scale.',
    actions: (
      <>
        <Button size="lg" variant="secondary">Get Started</Button>
        <Button size="lg" variant="outline" className="border-background/20 text-background hover:bg-background/10">
          Learn More
        </Button>
      </>
    ),
  },
}

export const WithoutActions: Story = {
  args: {
    variant: 'centered',
    heading: 'A hero section without action buttons',
    subheading: 'Sometimes you just need a heading and description.',
  },
}