import Link from "next/link";
import { site } from "@/content/site";

export function Logo({
  className = "",
  onClick,
}: {
  className?: string;
  onClick?: () => void;
}) {
  return (
    <Link
      href="/"
      onClick={onClick}
      aria-label={`${site.name} — home`}
      className={`group inline-flex items-center gap-2.5 ${className}`}
    >
      <span className="grid h-10 w-10 place-items-center rounded-xl bg-brand-700 text-white shadow-sm transition-colors group-hover:bg-brand-600">
        <svg
          width="22"
          height="22"
          viewBox="0 0 24 24"
          fill="none"
          aria-hidden="true"
        >
          <path
            d="M6 21V4.5C6 3.67 6.67 3 7.5 3H13a6 6 0 0 1 0 12H9"
            stroke="currentColor"
            strokeWidth="2.4"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
          <circle cx="17.5" cy="18.5" r="2.2" fill="var(--color-accent-400)" />
        </svg>
      </span>
      <span className="flex flex-col leading-none">
        <span className="font-display text-[15px] font-bold tracking-tight text-ink-900">
          Phina Consultants
        </span>
        <span className="text-[11px] font-medium uppercase tracking-[0.18em] text-brand-700">
          Limited
        </span>
      </span>
    </Link>
  );
}