---
import McpTestDemo from "#/components/blocks/McpTestDemo.astro";
import TestClient from "#/components/blocks/TestClient.astro";
import TestRunnerDemo from "#/components/blocks/TestRunnerDemo.astro";
import Icon from "#/components/Icon.astro";
import SectionPointsContent from "./SectionPointsContent.astro";
import { tt } from "#/copy";
import type { SectionExtraProps } from "./Section.types";

type Props = SectionExtraProps;

const extra = Astro.props;
---

{
  () => {
    switch (extra.kind) {
      case "icons": {
        const { icons, size, adjust, align } = extra;
        return (
          <div
            class:list={[
              "extra is-icons overflow-hidden w-full h-[1em] flex relative",
              // size
              size === "xs" && "text-3xl",
              size === "sm" && "text-3xl sm:text-4xl",
              (!size || size === "md") && "text-4xl sm:text-5xl",
              size === "lg" && "text-4xl sm:text-6xl",
              size === "xl" && "text-5xl sm:text-7xl",
              // align
              align && `is-align-${align === true ? "center" : align}`,
              align === "start" && "justify-start",
              (align === true || align === "center") && "",
              align === "end" && "justify-end",
              // adjust
              adjust && `is-adjust-${adjust === true ? "center" : adjust}`,
              adjust === "start" && "items-start",
              (align === true || adjust === "center") && "items-center",
              adjust === "end" && "items-end",
            ]}
          >
            <div class="spacer" />
            <div
              class:list={[
                "extra-icons flex",
                // size
                size === "xs" && "gap-1.5",
                size === "sm" && "gap-2",
                (!size || size === "md") && "gap-3",
                size === "lg" && "gap-3",
                size === "xl" && "gap-3",
              ]}
            >
              {icons.map((icon) => (
                <Icon prop={icon} />
              ))}
            </div>
            <div class="spacer" />
          </div>
        );
      }

      case "code": {
        const { id } = extra;
        switch (id) {
          case "test-client":
            return <TestClient />;
        }
      }

      case "demo": {
        const { id } = extra;
        switch (id) {
          case "test-runner":
            return <TestRunnerDemo />;

          case "mcp-test":
            return <McpTestDemo />;
        }
      }

      case "points": {
        return <SectionPointsContent {...extra} />;
      }

      case "checklist": {
        const { items } = extra;
        return (
          <ul class="extra is-checklist list-none pl-0 text-ms grid grid-cols-2 gap-1">
            {items.map((item) => (
              <li class="list flex items-center gap-1.5">
                <Icon id="check_circle" style="300" class="text-lime-500" />
                <span class="">{item.en}</span>
              </li>
            ))}
          </ul>
        );
      }

      case "copy": {
        const { content } = extra;
        return <div class="extra is-copy copy" set:html={tt.md(content.en)} />;
      }

      default:
        extra satisfies never;
    }
  }
}

<style>
  @reference "#/styles/global.css";

  .extra.is-icons {
    mask-image: linear-gradient(to right, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);

    &.is-align-center {
      & .spacer {
        @apply grow;
      }
    }
  }
</style>
