'use client'
import { use } from 'react'

import { notFound } from 'next/navigation'
import { useSharedData } from '@/app/context/ProjectContext';
import { useMountTransition } from '@/hooks/useAnimations';
import "../../../styles/markdown-container.css";
import Link from 'next/link';
import { BLOG_POSTS } from '@/data/content';
import SimpleGallery from '@/components/SimpleGallery';

export default function BlogPostPage({params}: { params: Promise<{ slug: string }> })
{

  const mounted = useMountTransition(50)
  const { slug } = use(params);

  const hasValidPost = BLOG_POSTS.find((v)=>v.slug == slug);
  if (!slug || !hasValidPost) notFound();

  const hasValidDetails = hasValidPost.details
  const postDetails = useSharedData();

  return (
     <div 
     id="blog-markdown-container" 
     className={"markdown-container"}
     style={{
      opacity: mounted ? 1 : 0,
      transition: "all 0.5s ease",
      translate: mounted ? "0 2em" : "0 0"
     }}
      >          

   {
    hasValidDetails ? 
    (
    <main dangerouslySetInnerHTML={{ __html: postDetails }}>
    </main>
    ) : (
      <p>No post details available.</p>
      )
    }

    {hasValidPost.images && hasValidPost.images.length > 0 && (
      <section className="project-details-gallery">
        <h2>Gallery</h2>
        <SimpleGallery images={hasValidPost.images} title={hasValidPost.title} gallerySize="large"/>
      </section>
    )}

    
    <div style={{
      display: "flex",
      flexDirection: "row",
      gap: "1em",
      marginBottom: "2em"
    }}>
      <Link onClick={(e)=>{
          window.scrollTo({
            top: 0,
            left: 0,
            behavior: 'smooth'
          });
        }}
        
          className="expand-on-hover-button"
          href={"#"}>Back To Top</Link>

          <Link 
          className="expand-on-hover-button"
          href={"/blog"}>All Posts</Link>
        </div>
    </div>
  );
}