Logo

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

/** The Particular.Tech mark: a "P" bowl orbited by a single particle. */
function LogoMark({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <svg
      viewBox="0 0 32 32"
      fill="none"
      aria-hidden
      data-slot="logo-mark"
      className={cn("size-6 shrink-0", className)}
      {...props}
    >
      <rect width="32" height="32" rx="8" className="fill-foreground" />
      <path
        d="M11 24V8h6.5a5.5 5.5 0 0 1 0 11H11"
        className="stroke-background"
        strokeWidth="3"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <circle cx="23.5" cy="23.5" r="2.5" className="fill-brand" />
    </svg>
  )
}

function Logo({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="logo"
      className={cn("inline-flex items-center gap-2 font-heading text-[0.9375rem] font-semibold tracking-tight", className)}
      {...props}
    >
      <LogoMark />
      <span>
        Particular<span className="text-muted-foreground">.Tech</span>
      </span>
    </span>
  )
}

export { Logo, LogoMark }