"use client";

import Markdown from "react-markdown";

import ContentCard from "@/components/ContentCard";
import { useApp } from "@/context/app";
import { useGlobal } from "@/context/global";
import { useParams } from "next/navigation";
import { useEffect } from "react";
import style from "./style.module.css";

type MarkdownProps = {
  content: string;
};
export default function MarkDownContent({ content }: MarkdownProps) {
  const { dict } = useGlobal();
  const { setHeader } = useApp();

  const params: any = useParams();

  useEffect(() => {
    setHeader({
      title: {
        link: "/dashboard",
        text: dict.pages.general.navigation.dashboard,
        path: [
          { link: "releases", text: dict.pages.general.navigation.versions },
          {
            link: params.version as string,
            text: params.version.slice(0, -3) ?? "Preview",
          },
        ],
      },
    });

    return () => {
      setHeader(undefined);
    };
  }, []);

  return (
    <>
      <ContentCard className="h-full overflow-auto">
        <Markdown className={style.markDown}>{content.toString()}</Markdown>
      </ContentCard>
    </>
  );
}