import { useBasedTranslation } from '@based/i18n'
import type { TranslationsType } from 'src/app/i18n'
import { useMeta } from '../../metaExtractor/metaContext'
import { Usage } from './usage'

export const MetaInstall = ({ filterBy }: Based.UI.Extractor.FilterProps) => {
  const { meta } = useMeta(filterBy)

  if (!meta || !meta.component) {
    return null
  }

  const t = useBasedTranslation<TranslationsType>()
  const exportType =
    meta.exportType === 'named'
      ? `{ ${meta.component.displayName} }`
      : meta.component.displayName
  const importSyntax = `import ${exportType} from '${meta.packageName}'`
  const installSyntax = `npm i -s ${meta.packageName}`

  return (
    meta && (
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 72,
        }}
      >
        <Usage
          title={t('content.install')}
          code={installSyntax}
          language="bash"
        />
        <Usage title={t('content.importTitle')} code={importSyntax} />
      </div>
    )
  )
}
