---
export interface Props {
  name: {
    data: {
      name: string;
      domain: string;
      url?: string;
      candidate?: boolean;
    };
  };
  size?: "large" | "small";
  showAsLink?: boolean;
}

const { name, size = "large", showAsLink = true } = Astro.props;
const nameParts = name.data.name
  .toLowerCase()
  .split(" ")
  .filter((part) => part.trim() !== "");
const domain = name.data.domain.replace(".", "");
const url = name.data.url || `https://${name.data.domain}`;
const domainExtension = name.data.domain.split(".")[1];
const domainBase = name.data.domain.split(".")[0];

const sizeClasses = {
  large: "text-2xl",
  small: "text-xl",
};
---

<span class={`${sizeClasses[size]} break-words`}>
  {
    nameParts.map((part, index) => (
      <>
        {index > 0 && " "}
        {part === domain ? (
          showAsLink ? ( // comments here to prevent whitespace introduced by formatter
            <a
              href={url}
              class="text-blue-600 hover:text-blue-800 hover:underline domain-link"
              rel={name.data.candidate ? "nofollow" : undefined}
              data-extension={domainExtension}
            >
              <span class="domain-base">{domainBase}</span><!--
              --><span class="domain-extension">{domainExtension}</span><!--
              --></a>
          ) : (
            <span
              class="text-blue-600 domain-link group-hover:underline"
              data-extension={domainExtension}
            >
              <span class="domain-base">{domainBase}</span><!--
              --><span class="domain-extension">{domainExtension}</span><!--
            --></span>
          )
        ) : (
          <span>{part}</span>
        )}
      </>
    ))
  }
</span>

<style>
  .domain-base::after {
    content: ".";
    opacity: 0.7;
  }
</style>