import { useId } from "react";
import { cn } from "~/utils/cn";

/** The gitfor mark: a cloud carrying a git branch, cut out so it sits on any background. */
export function LogoMark({ className }: { className?: string }) {
  const maskId = useId();
  return (
    <svg viewBox="0 0 32 32" aria-hidden="true" className={cn("size-7 shrink-0", className)}>
      <defs>
        <mask id={maskId}>
          <rect width="32" height="32" fill="#fff" />
          <g fill="none" stroke="#000" strokeWidth="2.2" strokeLinecap="round">
            <path d="M13 12.5v8.5" />
            <path d="M20 14.5c0 3.6-7 3-7 6" />
          </g>
          <g fill="#000">
            <circle cx="13" cy="12" r="2.4" />
            <circle cx="13" cy="21" r="2.4" />
            <circle cx="20" cy="13.8" r="2.4" />
          </g>
        </mask>
      </defs>
      <g mask={`url(#${maskId})`} className="fill-accent-500">
        <circle cx="10.5" cy="17.5" r="6.5" />
        <circle cx="17.5" cy="12.5" r="8.5" />
        <circle cx="24.5" cy="17.5" r="5.5" />
        <path d="M4 17.5h26V21a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z" />
      </g>
    </svg>
  );
}

export function Logo({ className }: { className?: string }) {
  return (
    <span className={cn("inline-flex items-center gap-2", className)}>
      <LogoMark />
      <span className="font-mono text-sm font-semibold tracking-tight text-white">gitfor</span>
    </span>
  );
}