"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>
  );
}