import type { Meta, StoryObj } from '@storybook/react';
import { CodeBlock } from './CodeBlock';
import React from 'react';

const meta: Meta<typeof CodeBlock> = {
  title: 'Assistant/CodeBlock',
  component: CodeBlock,
  argTypes: {
    language: {
      control: 'select',
      options: ['typescript', 'tsx', 'css', 'bash', 'jsx'],
    },
  },
};

export default meta;
type Story = StoryObj<typeof CodeBlock>;

const exampleCode = `function HelloWorld() {
  const [count, setCount] = useState(0);

  return (
    <div className="flex flex-col gap-4">
      <h1 className="text-2xl font-bold">Counter</h1>
      <p>Current count: {count}</p>
      <Button onClick={() => setCount(count + 1)}>
        Increment
      </Button>
    </div>
  );
}`;

export const Default: Story = {
  args: {
    code: exampleCode,
    language: 'tsx',
    filename: 'Counter.tsx',
    showLineNumbers: false,
  },
  render: args => (
    <div className="w-full max-w-3xl">
      <CodeBlock {...args} />
    </div>
  ),
};

export const Simple: Story = {
  args: {
    code: 'npm install xertica-ui',
    language: 'bash',
  },
  render: args => (
    <div className="w-full max-w-xl">
      <CodeBlock {...args} />
    </div>
  ),
};