import { useId } from 'react'
import { cn } from '@/lib/utils'

/**
 * Kakeibo logosu (kaynak: `frontend/brand/logo.svg` — ikisi aynı tutulmalı).
 * `withText` ile yanında "Kakeibo" yazısı gösterilir.
 */
export function Logo({
  size = 32,
  withText = false,
  className,
}: {
  size?: number
  withText?: boolean
  className?: string
}) {
  // Sayfada birden fazla logo olursa gradient kimlikleri çakışmasın
  const gradientId = useId()

  return (
    <span className={cn('inline-flex items-center gap-2.5', className)}>
      <svg
        viewBox="0 0 512 512"
        width={size}
        height={size}
        role="img"
        aria-label={withText ? undefined : 'Kakeibo'}
        aria-hidden={withText || undefined}
        className="shrink-0"
      >
        <defs>
          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#3b4aa8" />
            <stop offset="1" stopColor="#26307a" />
          </linearGradient>
        </defs>
        <rect width="512" height="512" rx="112" fill={`url(#${gradientId})`} />
        <rect x="140" y="92" width="252" height="328" rx="28" fill="#f7f3ea" />
        <rect x="140" y="92" width="52" height="328" rx="28" fill="#e6dfcf" />
        <rect x="166" y="92" width="26" height="328" fill="#e6dfcf" />
        <g fill="#26307a">
          <circle cx="140" cy="150" r="13" />
          <circle cx="140" cy="220" r="13" />
          <circle cx="140" cy="290" r="13" />
          <circle cx="140" cy="360" r="13" />
        </g>
        <g
          fill="none"
          stroke="#26307a"
          strokeWidth="22"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M238 178 L292 254 L346 178" />
          <path d="M292 254 V342" />
          <path d="M250 266 H334" />
          <path d="M250 304 H334" />
        </g>
      </svg>
      {withText && (
        <span className="font-bold tracking-tight" style={{ fontSize: size * 0.6 }}>
          Kakeibo
        </span>
      )}
    </span>
  )
}