export function BrandMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 32 32" className={className} fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="1" y="1" width="30" height="30" rx="9" stroke="rgb(var(--accent))" strokeOpacity="0.5" />
      <path d="M10 8v16h11" stroke="rgb(var(--accent))" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx="21" cy="10.5" r="2.4" fill="rgb(var(--accent))" />
    </svg>
  );
}

export function Wordmark({ className }: { className?: string }) {
  return (
    <div className={className}>
      <div className="flex items-center gap-2.5">
        <BrandMark className="h-8 w-8" />
        <div className="leading-none">
          <span className="font-display text-[17px] font-extrabold tracking-tight text-fg">
            Legate
          </span>
          <span className="ml-1 font-mono text-[11px] uppercase tracking-[0.2em] text-accent">
            agent
          </span>
        </div>
      </div>
    </div>
  );
}
