---
import {siteConfig} from "../config";
import FediverseComments from "./helper/comments/Fediverse.astro";

const method = siteConfig.comments.type
const ArtalkConfig = siteConfig.comments.artalk
const giscusConfig = siteConfig.comments.giscus
interface Props {
    path?: string;
}

let { path='/' } = Astro.props;
---
{method === 'artalk' &&
    <div>
        <!-- CSS -->
        <link href={`https://${ArtalkConfig.instanceDomain}/dist/Artalk.css`} rel="stylesheet">

        <!-- JS -->
        <script src={`https://${ArtalkConfig.instanceDomain}/dist/Artalk.js`}></script>

        <!-- Artalk -->
        <div id="Comments"></div>
        <script define:vars={{ instanceDomain: ArtalkConfig.instanceDomain, pagePath: path }}>
                Artalk.init({
                    el: '#Comments',
                    pageKey: pagePath, // Using the passed variable
                    server: `https://${instanceDomain}`, // Using the passed variable
                })
        </script>
    </div>
}
{method === 'giscus' && (
    <script
      src="https://giscus.app/client.js"
      data-repo={giscusConfig.repo}
      data-repo-id={giscusConfig.repoId}
      data-category={giscusConfig.category}
      data-category-id={giscusConfig.categoryId}
      data-mapping={giscusConfig.mapping}
      data-strict={giscusConfig.strict}
      data-reactions-enabled={giscusConfig.reactionsEnabled}
      data-emit-metadata={giscusConfig.emitMetadata}
      data-input-position={giscusConfig.inputPosition}
      data-theme={giscusConfig.theme}
      data-lang={giscusConfig.lang}
      crossorigin="anonymous"
      async
    ></script>
)}
{method === 'fediverse' && <FediverseComments path={path} /> }