import { Breadcrumbs } from '../../components/breadcrumbs';
import { PageHead } from '../../components/pageHead';
import { Product } from '../../components/product';
import { ProductCategory } from '../../components/productCategory';
import { getProductBySlug, getBlogBySlug, getCategoryBySlug } from '../../lib/data';

type Props = {
  params: Promise<{ slug: string }>;
};

export default async function SlugPage({ params }: Props) {
  const { slug } = await params;

  const product = await getProductBySlug(slug);
  if (product) {
    return (
      <>
        {/* <h1>Product: {product.name}</h1>
        <p>{product.description}</p> */}
        <div className="page-header container">
          <Breadcrumbs />
          <PageHead type="product" />
        </div>
        <Product />
      </>
    );
  }

  const blog = await getBlogBySlug(slug);
  if (blog) {
    return (
      <div>
        <h1>Blog: {blog.title}</h1>
        <p>{blog.content}</p>
      </div>
    );
  }

  const category = await getCategoryBySlug(slug);
  if (category) {
    return (
      <>
        {/* <div>
          <h1>Category: {category.name}</h1>
          <p>{category.description}</p>
        </div> */}
        <div className="page-header container">
          <Breadcrumbs />
          <PageHead type="category" />
        </div>
        
        <ProductCategory />
      </>
    );
  }

  return <div>404 - Page Not Found</div>;
}