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

import { redirect, RedirectType } 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 { PROJECTS } from '@/data/content';

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

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

  if (!slug) redirect('project',RedirectType.replace);

  const hasValidProject = PROJECTS.find((v)=>v.slug == slug)
  const hasValidDetails = hasValidProject && PROJECTS.find((v)=>v.slug == slug)?.details
  const projectDetails = useSharedData();

  return (
     <div 
     id="project-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: projectDetails }}>
    </main>
    ) : (
      <p>This project has no details set up for it yet.</p>
      )
    }


    
    <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"
          style={{
            fontFamily: "var(--mono)",
            fontSize: 15,
            color: "var(--fg)",
            border: "1px solid var(--border)",
            backgroundColor: "var(--bg)",
            height: "3em",
            display: "block",
            alignContent: "center",
            alignItems: "center",
            textAlign: "center",
            width: "10em",
            borderRadius: "var(--radius-md)",
            
          }} href={"#"}>Back To Top</Link>

          <Link onClick={(e)=>{
          window.scrollTo({
            top: 0,
            left: 0,
            behavior: 'smooth'
          });
        }}
        
          className="expand-on-hover-button"
          style={{
            fontFamily: "var(--mono)",
            fontSize: 15,
            color: "var(--fg)",
            border: "1px solid var(--border)",
            backgroundColor: "var(--bg)",
            height: "3em",
            display: "block",
            alignContent: "center",
            alignItems: "center",
            textAlign: "center",
            width: "10em",
            borderRadius: "var(--radius-md)",
            
          }} href={"/project"}>More Projects</Link>
        </div>
    </div>
  );
}