import { useBasedTranslation } from '@based/i18n'
import { Api, useMeta } from 'src/app/components'
import type { TranslationsType } from 'src/app/i18n'

export const MetaApi = ({ filterBy }: Based.UI.Extractor.FilterProps) => {
  const { meta } = useMeta(filterBy)
  const t = useBasedTranslation<TranslationsType>()

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

  return (
    meta && (
      <Api
        title={t('content.api.title')}
        description={t('content.api.description')}
        props={meta?.component.props}
      />
    )
  )
}
