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

import { CTASection } from '@/components/ui/cta-section'
import { Button } from '@/components/ui/button'

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

export default meta
type Story = StoryObj<typeof meta>

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

export const Default: Story = {
  args: {
    heading: 'Ready to get started?',
    description: 'Join thousands of teams building better products with our design system.',
    actions: defaultActions,
  },
}

export const Centered: Story = {
  args: {
    variant: 'centered',
    background: 'muted',
    heading: 'Start building today',
    description: 'Free for open source. Affordable for teams.',
    actions: defaultActions,
  },
}

export const LeftAligned: Story = {
  args: {
    variant: 'left-aligned',
    background: 'muted',
    heading: 'Need help getting started?',
    description: 'Our team is ready to help you integrate the design system into your project.',
    actions: (
      <>
        <Button size="lg">Talk to us</Button>
      </>
    ),
  },
}

export const AccentBackground: Story = {
  args: {
    variant: 'centered',
    background: 'accent',
    heading: 'Upgrade your workflow',
    description: 'Take your team to the next level with our premium plan.',
    actions: (
      <>
        <Button size="lg" variant="secondary">Start Free Trial</Button>
        <Button
          size="lg"
          variant="outline"
          className="border-primary-foreground/20 text-primary-foreground hover:bg-primary-foreground/10"
        >
          Learn More
        </Button>
      </>
    ),
  },
}

export const SubtleBackground: Story = {
  args: {
    variant: 'centered',
    background: 'subtle',
    heading: 'Stay in the loop',
    description: 'Subscribe to our newsletter for the latest updates and releases.',
    actions: (
      <Button size="lg">Subscribe</Button>
    ),
  },
}

export const DefaultBackground: Story = {
  args: {
    variant: 'centered',
    background: 'default',
    heading: 'Questions? We have answers.',
    description: 'Check out our documentation or reach out to our support team.',
    actions: (
      <>
        <Button size="lg">View Docs</Button>
        <Button size="lg" variant="ghost">Contact Support</Button>
      </>
    ),
  },
}