Wordmark

import * as React from "react"
import { cn } from "cn"

function ParagonMark({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <svg
      viewBox="0 0 32 32"
      fill="none"
      aria-hidden="true"
      data-slot="paragon-mark"
      className={cn("size-[1em] shrink-0", className)}
      {...props}
    >
      <path
        d="M6 26V6H26M26 6V19H14M14 19V26"
        stroke="currentColor"
        strokeWidth="2.4"
        strokeLinecap="square"
      />
    </svg>
  )
}

/**
 * The Paragon lockup. Sized by font-size: `text-[27px]` is the header size.
 * The mark keeps its orientation in RTL; it's a logo, not a direction cue.
 */
function Wordmark({
  className,
  variant = "full",
  ...props
}: React.ComponentProps<"span"> & { variant?: "full" | "mark" }) {
  return (
    <span
      data-slot="wordmark"
      dir="ltr"
      className={cn(
        "inline-flex items-center gap-[0.37em] font-serif text-[1.6875rem] leading-none font-[450] tracking-[-0.03em] text-foreground",
        className
      )}
      {...props}
    >
      <ParagonMark className="size-[0.82em] translate-y-[0.02em]" />
      {variant === "full" ? <span>paragon</span> : <span className="sr-only">Paragon</span>}
    </span>
  )
}

export { Wordmark, ParagonMark }