import { CodeBlock } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Code Block',
  group: 'Blocks',
  section: 'components',
  icon: 'edit',
  component: CodeBlock,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Default',
    type: 'component',
    description: 'Default code block with file name and line numbers.',
    style: {
      size: '100%',
      frame: false,
    },
    render: () => {
      const code = `function MyComponent(props) {
    return (
        <div>
            <h1>Hello, {props.name}!</h1>
            <p>This is an example React component.</p>
        </div>
    );
}`
      return <CodeBlock fileName="index.jsx" language="jsx" code={code} />
    },
  },
  {
    name: 'NoFilename',
    type: 'component',
    description: 'Code block without a file name.',
    style: {
      size: '100%',
      frame: false,
    },
    render: () => {
      const code = `function MyComponent(props) {
    return (
        <div>
            <h1>Hello, {props.name}!</h1>
            <p>This is an example React component.</p>
        </div>
    );
}`
      return <CodeBlock language="jsx" code={code} />
    },
  },
  {
    name: 'NoLineNumbers',
    type: 'component',
    description: 'Code block without line numbers.',
    style: {
      size: '100%',
      frame: false,
    },
    render: () => {
      const code = `function MyComponent(props) {
    return (
        <div>
            <h1>Hello, {props.name}!</h1>
            <p>This is an example React component.</p>
        </div>
    );
}`
      return <CodeBlock lineNumbers={false} language="jsx" code={code} />
    },
  },
  {
    name: 'HighlitedLines',
    type: 'component',
    description: 'Code block with highlighted lines.',
    style: {
      size: '100%',
      frame: false,
    },
    render: () => {
      const code = `function MyComponent(props) {
    return (
        <div>
            <h1>Hello, {props.name}!</h1>
            <p>This is an example React component.</p>
        </div>
    );
}`
      return (
        <CodeBlock
          fileName="index.jsx"
          highlightedLines={[3, 4]}
          language="jsx"
          code={code}
        />
      )
    },
  },
  {
    name: 'NoBorder',
    type: 'component',
    description: 'Code block without a border.',
    style: {
      size: '100%',
      frame: false,
    },
    render: () => {
      const code = `function MyComponent(props) {
    return (
        <div>
            <h1>Hello, {props.name}!</h1>
            <p>This is an example React component.</p>
        </div>
    );
}`
      return <CodeBlock border={false} language="jsx" code={code} />
    },
  },
]
