import { CodeBlock, Text, colors } from '@based/ui'

export const Usage = ({
  title,
  code,
  language = 'tsx',
}: Based.UI.Playground.Content.Usage) => {
  return (
    <div
      id="usage"
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 16,
      }}
    >
      <Text variant="subheading-bold">{title}</Text>
      <div
        style={{
          border: `1px solid ${colors.neutral20Adjusted}`,
          borderRadius: 16,
          overflow: 'hidden',
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <CodeBlock
          border={false}
          language={language}
          code={code}
          lineNumbers={false}
        />
      </div>
    </div>
  )
}
