import Link from "next/link";
import type { CSSProperties } from "react";
import { cn } from "@/components/ui/cn";

/**
 * DataCenterIndex mark — a globe (circle + meridian) crossed by three rack lines;
 * the middle line is the accent "index tick" that runs past the globe's edge.
 * Monochrome ink + one accent; readable from 16 px to 512 px.
 */
export function LogoMark({ size = 24, className, ink = "currentColor", accent = "var(--accent)", title = "DataCenterIndex", style }: { size?: number; className?: string; ink?: string; accent?: string; title?: string; style?: CSSProperties }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={cn("shrink-0", className)} role="img" aria-label={title} style={style}>
      <circle cx="15" cy="16" r="12" stroke={ink} strokeWidth="2.2" />
      <path d="M15 4c-3.2 2.9-4.8 6.9-4.8 12s1.6 9.1 4.8 12c3.2-2.9 4.8-6.9 4.8-12S18.2 6.9 15 4Z" stroke={ink} strokeWidth="1.4" />
      <path d="M4.6 10.6h20.8M4.6 21.4h20.8" stroke={ink} strokeWidth="2" strokeLinecap="round" />
      <path d="M3 16h28" stroke={accent} strokeWidth="2.6" strokeLinecap="round" />
    </svg>
  );
}

/** Wordmark: "DataCenter" heavy + "Index" light, tight tracking; optional thin index mark. */
export function Wordmark({ className, compact }: { className?: string; compact?: boolean }) {
  return (
    <span className={cn("inline-flex items-baseline whitespace-nowrap leading-none tracking-[-0.02em] text-ink", className)}>
      <span className="font-semibold">DataCenter</span>
      <span className="font-normal text-ink-2">Index</span>
      {!compact && <span aria-hidden className="ml-1.5 inline-block h-[0.55em] w-[2px] translate-y-[1px] bg-accent" />}
    </span>
  );
}

export function Logo({ href = "/", size = 22, className, compact, textClassName }: { href?: string | null; size?: number; className?: string; compact?: boolean; textClassName?: string }) {
  const inner = (
    <>
      <LogoMark size={size} />
      <Wordmark compact={compact} className={cn("text-[16px]", textClassName)} />
    </>
  );
  if (!href) return <span className={cn("inline-flex items-center gap-2", className)}>{inner}</span>;
  return (
    <Link href={href} className={cn("inline-flex min-h-10 items-center gap-2 rounded-xs", className)} aria-label="DataCenterIndex — home">
      {inner}
    </Link>
  );
}