// components/shared/app-icon.tsx
// Scrum4Me app icon — concept 5 (Rocket)
// Gebruik: <AppIcon size={32} /> of <AppIcon size={64} className="..." />

interface AppIconProps {
  size?: number
  className?: string
}

export function AppIcon({ size = 32, className }: AppIconProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 512 512"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-label="Scrum4Me"
    >
      <defs>
        <linearGradient id="s4m-bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#1a1028"/>
          <stop offset="100%" stopColor="#0d0a14"/>
        </linearGradient>
        <linearGradient id="s4m-nose" x1="256" y1="60" x2="256" y2="212" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#c4b5fd"/>
          <stop offset="100%" stopColor="#7c3aed"/>
        </linearGradient>
      </defs>

      {/* Background */}
      <rect width="512" height="512" rx="114" fill="url(#s4m-bg)"/>

      {/* Block 1 — PBI */}
      <rect x="174" y="372" width="164" height="60" rx="12" fill="#4f6ef7" opacity="0.6"/>

      {/* Block 2 — Story */}
      <rect x="144" y="292" width="224" height="76" rx="12" fill="#6366f1" opacity="0.75"/>

      {/* Block 3 — Task */}
      <rect x="160" y="212" width="192" height="76" rx="12" fill="#7c3aed" opacity="0.9"/>

      {/* Rocket nose */}
      <path
        d="M256 60 C222 60 160 122 160 212 H352 C352 122 290 60 256 60Z"
        fill="url(#s4m-nose)"
      />

      {/* Window */}
      <circle cx="256" cy="152" r="30" fill="#0d0a14" opacity="0.5"/>
      <circle cx="256" cy="152" r="20" fill="#ede9fe" opacity="0.95"/>
      <circle cx="248" cy="144" r="6" fill="white" opacity="0.5"/>

      {/* Fins */}
      <path d="M160 332 L108 400 L160 400 Z" fill="#4f6ef7" opacity="0.55"/>
      <path d="M352 332 L404 400 L352 400 Z" fill="#4f6ef7" opacity="0.55"/>

      {/* Flame */}
      <path
        d="M212 432 Q244 472 256 456 Q268 472 300 432"
        stroke="#f59e0b" strokeWidth="12" strokeLinecap="round" fill="none" opacity="0.95"
      />
      <path
        d="M232 432 Q248 460 256 448 Q264 460 280 432"
        stroke="#fef3c7" strokeWidth="7" strokeLinecap="round" fill="none" opacity="0.7"
      />
    </svg>
  )
}
