import { useId } from 'react'

/**
 * Logo de l'application : une console de jeu portable dont l'écran affiche
 * une coche (« GameDev » + suivi/terminé), sur un badge dégradé indigo→teal.
 */
export default function Logo({
  size = 32,
  className
}: {
  size?: number
  className?: string
}): JSX.Element {
  const id = useId()
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 48 48"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      role="img"
      aria-label="GameDev Tracker"
    >
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse">
          <stop stopColor="#6366F1" />
          <stop offset="1" stopColor="#14B8A6" />
        </linearGradient>
      </defs>
      {/* Badge */}
      <rect width="48" height="48" rx="11" fill={`url(#${id})`} />
      {/* Corps de la console */}
      <rect x="12" y="12" width="24" height="24" rx="6" fill="#fff" />
      {/* Écran + coche */}
      <rect x="15.5" y="15.5" width="17" height="11" rx="2.5" fill="#4F46E5" />
      <path
        d="M18.6 21.2l2.6 2.6 6.4-6"
        stroke="#fff"
        strokeWidth="2.2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      {/* Croix directionnelle */}
      <rect x="16.9" y="28.6" width="2.2" height="6" rx="1.1" fill="#4F46E5" />
      <rect x="15" y="30.5" width="6" height="2.2" rx="1.1" fill="#4F46E5" />
      {/* Boutons d'action */}
      <circle cx="29.4" cy="30" r="1.7" fill="#4F46E5" />
      <circle cx="32.5" cy="32.3" r="1.7" fill="#0D9488" />
    </svg>
  )
}