import Link from "next/link";
import { siteConfig } from "@/lib/site-config";

export function Logo({ size = 44 }: { size?: number }) {
  const wordmarkSize = Math.round(size * 0.62);
  return (
    <Link
      href="/"
      aria-label={`${siteConfig.name} home`}
      className="group inline-flex flex-col leading-none transition-transform duration-300 ease-out will-change-transform hover:scale-[1.02]"
    >
      <span
        className="font-display font-extrabold tracking-tight text-[var(--color-ink)] transition-colors duration-200 group-hover:text-[var(--color-blue)]"
        style={{ fontSize: `${wordmarkSize}px` }}
      >
        Ortho<span className="text-[var(--color-blue)]">Globe</span>
      </span>
      <span className="mt-1 hidden text-[9px] font-bold uppercase tracking-[0.16em] text-[var(--color-slate)] sm:block">
        Intl. Orthopaedic Charity Collaboration
      </span>
    </Link>
  );
}
