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

import { Code } from '@/components/ui/code'

const meta = {
  title: 'Primitives/Code',
  component: Code,
  tags: ['autodocs'],
  parameters: { layout: 'centered' },
  argTypes: {
    variant: {
      control: 'select',
      options: ['inline', 'block'],
    },
    language: { control: 'text' },
  },
} satisfies Meta<typeof Code>

export default meta
type Story = StoryObj<typeof meta>

export const Inline: Story = {
  args: {
    variant: 'inline',
    children: 'pnpm install',
  },
}

export const InlineInSentence: Story = {
  render: () => (
    <p className="font-serif text-base leading-relaxed max-w-prose">
      To get started, run <Code>pnpm install</Code> and then{' '}
      <Code>pnpm dev</Code> to start the development server on{' '}
      <Code>localhost:3000</Code>.
    </p>
  ),
}

export const Block: Story = {
  args: {
    variant: 'block',
    language: 'bash',
    children: `pnpm install
pnpm dev
pnpm build`,
  },
}

export const BlockLongCommand: Story = {
  args: {
    variant: 'block',
    language: 'bash',
    children:
      'curl -fsSL https://example.com/install.sh | bash -s -- --prefix=/usr/local --no-color --very-long-flag-that-should-wrap',
  },
}

export const BlockTypescript: Story = {
  args: {
    variant: 'block',
    language: 'ts',
    children: `import { Code } from '@/components/ui/code'

export function Example() {
  return <Code variant="block">Hello, world!</Code>
}`,
  },
}

export const AllVariants: Story = {
  render: () => (
    <div className="flex flex-col gap-6 max-w-2xl">
      <div>
        <p className="text-sm text-muted-foreground mb-2 font-sans">Inline</p>
        <p className="font-serif">
          Use <Code>cn()</Code> from <Code>@/lib/utils</Code> to merge Tailwind classes.
        </p>
      </div>

      <div>
        <p className="text-sm text-muted-foreground mb-2 font-sans">Block</p>
        <Code variant="block" language="bash">
          {`# install and run
pnpm install
pnpm dev`}
        </Code>
      </div>
    </div>
  ),
}