mypage/app/[locale]/@breadcrumbs/blog/[...slug]/page.tsx

import { Breadcrumbs } from '@/components/layout/Breadcrumbs'
import { getPostBySlug } from '@/lib/markdown'
import { getTranslations } from 'next-intl/server'

interface BreadcrumbItem {
  label: string
  href: string
  current?: boolean
}

export default async function BlogPostBreadcrumb({
  params,
}: {
  params: Promise<{ slug: string[] }>
}) {
  const t = await getTranslations('Breadcrumbs')
  const { slug } = await params
  const slugPath = slug.join('/')
  const post = await getPostBySlug(slugPath)

  const items: BreadcrumbItem[] = [
    {
      label: t('blog'),
      href: '/blog',
    },
  ]

  if (slug.length > 1) {
    for (let i = 0; i < slug.length - 1; i++) {
      const segmentPath = slug.slice(0, i + 1).join('/')
      const dirName = slug[i]
      items.push({
        label: t(dirName) || dirName.charAt(0).toUpperCase() + dirName.slice(1),
        href: `/blog/${segmentPath}`,
      })
    }
  }

  items.push({
    label: post ? post.frontmatter.title : slug[slug.length - 1],
    href: `/blog/${slugPath}`,
    current: true,
  })

  return <Breadcrumbs items={items} />
}