import Image from 'next/image';

export function Logo({ size = 30 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true" focusable="false">
      <rect width="32" height="32" rx="9" fill="var(--ink)" />
      <path
        d="M7.5 24.5c5 0 3.5-7.5 9-7.5s4-7 8-7"
        fill="none"
        stroke="var(--accent-bright)"
        strokeWidth="2.6"
        strokeLinecap="round"
        strokeDasharray="0.1 4.4"
      />
      <circle cx="7.5" cy="24.5" r="2.6" fill="var(--bg)" />
      <circle cx="24.5" cy="10" r="3.6" fill="var(--accent-bright)" />
    </svg>
  );
}

/** The full EntreJourneyMap logo (public/brand/logoej-1.png), used in the header and footer. */
export function BrandLogo({ preload = false, className = '' }: { preload?: boolean; className?: string }) {
  return (
    <span className={`brand-logo ${className}`}>
      <Image src="/brand/logoej-1.png" alt="EntreJourneyMap" width={1204} height={176} preload={preload} />
    </span>
  );
}