'use client'

import {
  Container,
  Text,
} from '@chakra-ui/react'
import BlogPost from '@/components/blog/BlogPost'
import Footer from '@/components/Footer'
import Header from '@/components/Header'

interface BlogPostPageClientProps {
  slug: string
}

export default function BlogPostPageClient({ slug }: BlogPostPageClientProps) {
  // Check if it's a numeric ID or a slug
  const postId = parseInt(slug, 10)
  const isNumericId = !isNaN(postId)

  if (!slug) {
    return (
      <>
        <Header />
        <Container maxW="7xl" py={20}>
          <Text fontSize="xl" textAlign="center">Invalid post ID</Text>
        </Container>
        <Footer />
      </>
    )
  }

  return (
    <>
      <Header />
      <BlogPost slug={isNumericId ? undefined : slug} postId={isNumericId ? postId : undefined} />
      <Footer />
    </>
  )
}