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

import { Navbar, NavbarLink } from '@/components/ui/navbar'
import { Logo } from '@/components/ui/logo'
import { Button } from '@/components/ui/button'

const meta = {
  title: 'Navigation/Navbar',
  component: Navbar,
  tags: ['autodocs'],
  parameters: { layout: 'fullscreen' },
  argTypes: {
    variant: {
      control: 'select',
      options: ['solid', 'transparent', 'minimal'],
    },
  },
  decorators: [
    (Story) => (
      <div className="min-h-[200px]">
        <Story />
      </div>
    ),
  ],
} satisfies Meta<typeof Navbar>

export default meta
type Story = StoryObj<typeof meta>

const navLinks = (
  <>
    <NavbarLink href="#" active>Home</NavbarLink>
    <NavbarLink href="#">About</NavbarLink>
    <NavbarLink href="#">Services</NavbarLink>
    <NavbarLink href="#">Contact</NavbarLink>
  </>
)

const navActions = (
  <>
    <Button variant="ghost" size="sm">Log in</Button>
    <Button size="sm">Sign up</Button>
  </>
)

export const Solid: Story = {
  args: {
    variant: 'solid',
    logo: <Logo size="sm" />,
    actions: navActions,
    children: navLinks,
  },
}

export const Transparent: Story = {
  args: {
    variant: 'transparent',
    logo: <Logo size="sm" />,
    actions: navActions,
    children: navLinks,
  },
  decorators: [
    (Story) => (
      <div className="min-h-[200px] bg-gradient-to-br from-primary/20 to-primary/5">
        <Story />
      </div>
    ),
  ],
}

export const Minimal: Story = {
  args: {
    variant: 'minimal',
    logo: <Logo size="sm" />,
    actions: navActions,
    children: navLinks,
  },
}

export const WithoutActions: Story = {
  args: {
    variant: 'solid',
    logo: <Logo size="sm" />,
    children: navLinks,
  },
}

export const LogoOnly: Story = {
  args: {
    variant: 'solid',
    logo: <Logo size="sm" />,
    actions: navActions,
  },
}