---
import { COMMUNITY_INVITE_URL } from "../../consts";
import { getIsRtlFromUrl } from "../../languages";

export interface Props {
  editHref: string;
}

const { editHref } = Astro.props;
const { pathname } = Astro.url;
const isRtl = getIsRtlFromUrl(pathname);
// const isLangEN = getLanguageFromURL(pathname) === "en";
---

<div
  dir={isRtl ? "rtl" : "ltr"}
  class="flex w-full flex-col pt-8 text-center md:text-start lg:py-0"
>
  <h2
    class="mb-4 hidden text-lg font-semibold text-slate-900 dark:text-ces-50 md:block"
  >
    More
  </h2>

  <ul class="flex flex-col items-center gap-2 text-sm md:items-start">
    <li
      class="hidden text-ces-800 hover:text-ces-400 dark:text-ces-200 dark:hover:text-ces-100 md:block"
    >
      <a
        class="flex items-center gap-2"
        href={editHref}
        target="_blank"
        rel="noreferrer noopener"
      >
        <span>
          <svg
            class="svg-inline--fa fa-pen fa-w-16 inline"
            aria-hidden="true"
            focusable="false"
            data-prefix="fas"
            data-icon="pen"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
            height="1em"
            width="1em"
          >
            <path
              fill="currentColor"
              d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
            ></path>
          </svg>
        </span>
        <span> Edit this page</span>
      </a>
    </li>

    <!-- <li
      class:list={[
        "hidden text-ces-800 hover:text-ces-400 dark:text-ces-200 dark:hover:text-ces-100",
        isLangEN && "md:block",
      ]}
    >
      <a
        class="flex items-center gap-2"
        href={"https://github.com/t3-oss/create-t3-app/blob/next/www/TRANSLATIONS.md"}
        target="_blank"
        rel="noreferrer"
      >
        <span>
          <svg
            aria-hidden="true"
            focusable="false"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 88.6 77.3"
            height="1.3em"
            width="1.3em"
            style="margin: -2px;"
          >
            <path
              fill="currentColor"
              d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z"
            ></path>
            <path
              fill="currentColor"
              d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8          c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z"
            ></path>
          </svg>
        </span>
        <span> Translate this page</span>
      </a>
    </li> -->

    <li
      class="text-ces-800 hover:text-ces-400 dark:text-ces-200 dark:hover:text-ces-100"
    >
      <a
        class="items-top flex gap-2"
        href={COMMUNITY_INVITE_URL}
        target="_blank"
        rel="noreferrer noopener"
      >
        <span>
          <svg
            class="svg-inline--fa fa-comment-alt fa-w-16 inline"
            aria-hidden="true"
            focusable="false"
            data-prefix="fas"
            data-icon="comment-alt"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 512 512"
            height="1em"
            width="1em"
          >
            <path
              fill="currentColor"
              d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
            ></path>
          </svg>
        </span>
        <span> Join Our Discord Community</span>
      </a>
    </li>
  </ul>
</div>