import { clsx } from "@/lib/cx";

export function CustodyMark({

  size = 28,

  className,

  showTick = true,

}: {

  size?: number;

  className?: string;

  showTick?: boolean;

}) {

  if (size < 24) {

    return (

      <span

        className={clsx("inline-block align-middle", className)}

        style={{ width: size, height: size }}

        role="img"

        aria-label="Docket"

      >

        <svg

          width={size}

          height={size}

          viewBox="0 0 32 32"

          fill="none"

          xmlns="http://www.w3.org/2000/svg"

          aria-hidden="true"

        >

          <rect width="32" height="32" rx="6" fill="var(--dk-signal)" />

          {}

          <path

            d="M9 7 H19 L23 11 V25 H9 Z"

            fill="var(--dk-ink)"

          />

          {}

          <path d="M19 7 L23 11 H19 Z" fill="var(--dk-signal)" />

        </svg>

      </span>

    );

  }

  return (

    <span

      className={clsx("inline-block align-middle", className)}

      style={{ width: size, height: size }}

      role="img"

      aria-label="Docket"

    >

      <svg

        width={size}

        height={size}

        viewBox="0 0 100 100"

        fill="none"

        xmlns="http://www.w3.org/2000/svg"

        aria-hidden="true"

      >

        {}

        <path

          d="M26 16 H60 L80 36 V86 H26 Z"

          fill="none"

          stroke="var(--dk-paper)"

          strokeWidth="5"

          strokeLinejoin="round"

        />

        {}

        <path

          d="M60 16 V36 H80"

          fill="none"

          stroke="var(--dk-signal)"

          strokeWidth="5"

          strokeLinejoin="round"

        />

        {}

        {showTick && (

          <>

            <line

              x1="37"

              y1="54"

              x2="69"

              y2="54"

              stroke="var(--dk-paper)"

              strokeWidth="5"

              strokeLinecap="round"

              opacity="0.5"

            />

            <line

              x1="37"

              y1="68"

              x2="60"

              y2="68"

              stroke="var(--dk-paper)"

              strokeWidth="5"

              strokeLinecap="round"

              opacity="0.5"

            />

          </>

        )}

      </svg>

    </span>

  );

}

export function Wordmark({ className }: { className?: string }) {

  return (

    <span

      className={clsx("font-display", className)}

      style={{ fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1 }}

    >

      Docket

    </span>

  );

}