page.jsx

import matter from 'gray-matter'
import { join } from 'path'
import { promises as fs } from 'fs'
import HeroBanner from '@component/HeroBanner'

async function getComponents() {
  const componentsPath = join(process.cwd(), '/src/data/components')
  const categoriesPath = join(process.cwd(), '/src/data/categories')

  const categorySlugs = ['components']
  const componentSlugs = await fs.readdir(componentsPath)

  const componentsByCategory = await Promise.all(
    categorySlugs.map(async (categorySlug) => {
      const categoryPath = join(categoriesPath, `${categorySlug}.mdx`)
      const categoryItem = await fs.readFile(categoryPath, 'utf-8')

      const { data: categoryData } = matter(categoryItem)

      const componentItems = await Promise.all(
        componentSlugs
          .filter((componentSlug) => componentSlug.includes(categorySlug))
          .map(async (componentSlug) => {
            const componentPath = join(componentsPath, componentSlug)
            const componentItem = await fs.readFile(componentPath, 'utf-8')

            const { data: componentData } = matter(componentItem)

            const componentSlugFormatted = componentSlug.replace('.mdx', '')
            const componentSlugTrue = componentSlugFormatted.replace(
              `${componentData.category}-`,
              ''
            )
            const componentCount = Object.values(
              componentData.components
            ).length

            return {
              title: componentData.title,
              slug: componentSlugTrue,
              category: componentData.category,
              count: componentCount,
            }
          })
      )

      return {
        categoryTitle: categoryData.title,
        componentItems,
      }
    })
  )

  return componentsByCategory
}

export default async function Page() {
  // TODO: If we have more than one categories in the future
  // const componentsByCategory = await getComponents()

  return <HeroBanner />
}