import Link from 'next/link'
import Image from 'next/image'

interface LogoProps {
  variant?: 'light' | 'dark'
}

export default function Logo({ variant = 'light' }: LogoProps) {
  const color = variant === 'dark' ? '#2d5a6d' : '#9BBFCC'

  return (
    <Link
      href="/"
      className={`flex shrink-0 items-center gap-1.5 sm:gap-2 lg:gap-3 no-underline xl:gap-[14px] ${variant === 'light' ? 'drop-shadow-lg' : ''}`}
      style={{
        fontFamily: 'var(--font-cinzel), serif',
        color,
        /* Mniejszy narzut w pasku nawigacji — pełna skala od ~xl */
        fontSize: 'clamp(18px, 2.75vw, 36px)',
        letterSpacing: '0.08em',
      }}
    >
      <Image
        src="/images/twoja_lodka_logo.png"
        alt=""
        width={44}
        height={44}
        className="mr-1 size-8 shrink-0 object-contain sm:mr-2 sm:size-9 lg:size-10 xl:mr-4 xl:size-11"
      />
      <span>twoja</span>
      <svg
        viewBox="0 0 38 44"
        width={38}
        height={44}
        className="h-8 w-7 shrink-0 sm:h-9 sm:w-8 lg:h-10 lg:w-9 xl:h-11 xl:w-[38px]"
        aria-hidden
      >
        <line
          x1={19}
          y1={4}
          x2={19}
          y2={36}
          stroke={color}
          strokeWidth={1.5}
        />
        <path
          d="M19 5 L4 28 L19 28 Z"
          fill={color}
          fillOpacity={0.85}
        />
        <path
          d="M19 10 L34 28 L19 28 Z"
          fill={color}
          fillOpacity={0.5}
        />
        <path
          d="M6 36 Q19 40 32 36"
          stroke={color}
          strokeWidth={1.5}
          fill="none"
          strokeLinecap="round"
        />
      </svg>
      <span>łódka</span>
    </Link>
  )
}