/** @jsx jsx */
import { jsx } from "theme-ui"
import React from "react"
import { LiveProvider, LivePreview } from "react-live"
import {
  CodeBlockWrapper,
  DisplayHighlightedCode,
} from "@smerth/gatsby-theme-theme-ui"

function DisplayCode({
  params,
  metastring,
  codeString,
  components,
  theme,
  language,
  defaultProps,
}) {
  const title =
    params.props?.title || params.props?.file ? (
      <React.Fragment>
        {params.props?.title ? <span>{params.props?.title}</span> : "Example"}
        {params.props?.file ? <span>@ {params.props?.file}</span> : null}
      </React.Fragment>
    ) : null

  return (
    <CodeBlockWrapper type="display" title={title}>
      <LiveProvider code={codeString} scope={components} theme={theme}>
        <LivePreview sx={{ my: [6, 7] }} />
      </LiveProvider>
      <DisplayHighlightedCode
        codeString={codeString}
        language={language}
        metastring={metastring}
        theme={theme}
        defaultProps={defaultProps}
      />
    </CodeBlockWrapper>
  )
}

export default DisplayCode