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

import { Footer } from '@/components/ui/footer'
import { Logo } from '@/components/ui/logo'
import { Button } from '@/components/ui/button'

const meta = {
  title: 'Composition/Footer',
  component: Footer,
  tags: ['autodocs'],
  parameters: { layout: 'fullscreen' },
  argTypes: {
    variant: {
      control: 'select',
      options: ['minimal', 'full'],
    },
  },
} satisfies Meta<typeof Footer>

export default meta
type Story = StoryObj<typeof meta>

export const Minimal: Story = {
  args: {
    variant: 'minimal',
    logo: <Logo size="sm" />,
    copyright: <>&copy; 2026 Greyhaven. All rights reserved.</>,
    actions: (
      <div className="flex gap-4 text-sm text-muted-foreground">
        <a href="#" className="hover:text-foreground transition-colors">Privacy</a>
        <a href="#" className="hover:text-foreground transition-colors">Terms</a>
        <a href="#" className="hover:text-foreground transition-colors">Contact</a>
      </div>
    ),
  },
}

export const Full: Story = {
  args: {
    variant: 'full',
    logo: <Logo size="md" />,
    copyright: <>&copy; 2026 Greyhaven. All rights reserved.</>,
    linkGroups: [
      {
        title: 'Product',
        links: [
          { label: 'Features', href: '#' },
          { label: 'Pricing', href: '#' },
          { label: 'Changelog', href: '#' },
          { label: 'Docs', href: '#' },
        ],
      },
      {
        title: 'Company',
        links: [
          { label: 'About', href: '#' },
          { label: 'Blog', href: '#' },
          { label: 'Careers', href: '#' },
          { label: 'Contact', href: '#' },
        ],
      },
      {
        title: 'Legal',
        links: [
          { label: 'Privacy Policy', href: '#' },
          { label: 'Terms of Service', href: '#' },
          { label: 'Cookie Policy', href: '#' },
        ],
      },
    ],
    actions: (
      <div className="flex gap-2">
        <Button variant="ghost" size="sm">Twitter</Button>
        <Button variant="ghost" size="sm">GitHub</Button>
        <Button variant="ghost" size="sm">Discord</Button>
      </div>
    ),
  },
}

export const MinimalNoCopyright: Story = {
  args: {
    variant: 'minimal',
    logo: <Logo size="sm" />,
    actions: (
      <div className="flex gap-4 text-sm text-muted-foreground">
        <a href="#" className="hover:text-foreground transition-colors">Docs</a>
        <a href="#" className="hover:text-foreground transition-colors">GitHub</a>
      </div>
    ),
  },
}