import { useRef } from 'react'
import { useTypedRoute } from '../router'
import { MetaApi } from './metaApi'
import { MetaBlock } from './metaBlock'
import { MetaHeader } from './metaHeader'
import { MetaInstall } from './metaInstall'

export const ContentCompact = ({
  component,
  showApi,
  showUsage,
}: Based.UI.Playground.Content.Compact) => {
  const { params } = useTypedRoute()
  const { section } = params
  const isComponents = section === 'components'
  const containerRef = useRef<HTMLDivElement>(null)

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <div
        ref={containerRef}
        style={{
          padding: 72,
          maxWidth: 1440,
          width: '100%',
        }}
      >
        <MetaHeader filterBy={component} />
        <MetaBlock filterBy={component} />
        {isComponents && (
          <>
            {showUsage && <MetaInstall filterBy={component} />}
            {showApi && <MetaApi filterBy={component} />}
          </>
        )}
      </div>
    </div>
  )
}
