'use client'

import { useState } from 'react'

type BrandingLogoProps = {
  className?: string
  alt?: string
}

export default function BrandingLogo({ className, alt = 'Magent logo' }: BrandingLogoProps) {
  const [loaded, setLoaded] = useState(false)
  const [failed, setFailed] = useState(false)

  return (
    <span className={`${className ?? ''} branding-logo-shell`} role="img" aria-label={alt}>
      {!failed ? (
        <img
          className={loaded ? 'is-loaded' : undefined}
          src="/api/branding/logo.png"
          alt=""
          aria-hidden="true"
          onLoad={() => setLoaded(true)}
          onError={() => setFailed(true)}
        />
      ) : null}
      {!loaded ? (
        <svg aria-hidden="true" viewBox="0 0 64 64" focusable="false">
          <defs>
            <linearGradient id="magentLogoGlow" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#7ed7ff" />
              <stop offset="100%" stopColor="#c6c1ff" />
            </linearGradient>
          </defs>
          <rect width="64" height="64" rx="12" fill="#0b1328" />
          <rect x="6" y="6" width="52" height="52" rx="9" fill="#111a33" />
          <path
            d="M16 48V16h8l8 13 8-13h8v32h-8V30l-8 12-8-12v18h-8z"
            fill="url(#magentLogoGlow)"
          />
        </svg>
      ) : null}
    </span>
  )
}