---
import { Icon } from "astro-icon/components";
import { getLanguage } from "../../utils/languages";

interface Props {
  lang: string;
  size?: "xs" | "md";
  linkEnabled?: boolean;
}

const { size = "md", lang, linkEnabled = true } = Astro.props as Props;

const baseClasses = {
  container: [
    "flex items-center w-fit",
    "pl-2 pr-2 py-0.5 gap-1",
    "text-sm font-semibold leading-3",
    "bg-white shadow rounded-full",
    "transition-all duration-300 ease-in-out hover:bg-zinc-800 hover:text-white",
    "max-sm:pl-1 max-sm:pr-1.5 max-sm:text-xs max-sm:gap-0.5",
  ].join(" "),
  iconContainer: [
    "flex items-center justify-center",
    "aspect-square",
    "bg-black rounded-full p-1",
  ].join(" "),
};

const sizeClasses = {
  xs: "size-5",
  md: "size-7",
};

const selectedLanguage = getLanguage(lang);

const getContainerClasses = () => {
  const textSize = selectedLanguage.name.length > 10 ? "text-sm" : "text-base";
  return `${baseClasses.container} ${textSize}`;
};

const getIconContainerClasses = () => {
  return `${baseClasses.iconContainer} ${sizeClasses[size]} max-lg:size-6 max-sm:size-5 ${
    selectedLanguage.className ? selectedLanguage.className : ""
  }`;
};
---

{
  linkEnabled ? (
    <a
      class="cursor-pointer"
      href={`/blog/techs/${lang}`}
      aria-label={`View articles about ${selectedLanguage.name}`}
      role="link"
    >
      <span
        class={getContainerClasses()}
        role="presentation"
        aria-hidden="true"
      >
        <div
          class={getIconContainerClasses()}
          role="img"
          aria-label={`${selectedLanguage.name} icon`}
        >
          <Icon class="!w-full" name={selectedLanguage.iconName} />
        </div>
        {selectedLanguage.name}
      </span>
    </a>
  ) : (
    <span
      class={`${getContainerClasses()} cursor-default`}
      role="presentation"
      aria-hidden="true"
    >
      <div
        class={getIconContainerClasses()}
        role="img"
        aria-label={`${selectedLanguage.name} icon`}
      >
        <Icon class="!w-full" name={selectedLanguage.iconName} />
      </div>
      {selectedLanguage.name}
    </span>
  )
}