import React, { useState } from 'react'
import { CodeBlock } from './index.js'

const code = `function MyComponent(props) {
    return (
        <div>
            <h1>Hello, {props.name}!</h1>
            <p>This is an example React component.</p>
        </div>
    );
}`

export const Default = () => {
  return <CodeBlock fileName="index.jsx" language="jsx" code={code} />
}

export const NoFilename = () => {
  return <CodeBlock language="jsx" code={code} />
}

export const NoLineNumbers = () => {
  return <CodeBlock lineNumbers={false} language="jsx" code={code} />
}

export const HighlitedLines = () => {
  return (
    <CodeBlock
      fileName="index.jsx"
      highlightedLines={[3, 4]}
      language="jsx"
      code={code}
    />
  )
}

export const NoBorder = () => {
  return <CodeBlock border={false} language="jsx" code={code} />
}
