interface LogoProps {
  className?: string;
  variant?: "dark" | "light";
}

export function Logo({ className, variant = "dark" }: LogoProps) {
  return (
    <span className={`logo logo--${variant} ${className ?? ""}`}>
      <svg
        className="logo__mark"
        viewBox="0 0 64 64"
        fill="none"
        aria-hidden="true"
        focusable="false"
      >
        <path
          d="M4 40 L17 20 L27 33 L38 12 L60 40"
          stroke="currentColor"
          strokeWidth="3.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M4 48 Q16 44 32 48 T60 48"
          stroke="currentColor"
          strokeWidth="3"
          strokeLinecap="round"
        />
        <path
          d="M4 55 Q16 51 32 55 T60 55"
          stroke="currentColor"
          strokeWidth="2.5"
          strokeLinecap="round"
          opacity="0.55"
        />
      </svg>
      <span className="logo__word">Fjora</span>
    </span>
  );
}