"use client";

interface LogoProps {
  size?: number;
  className?: string;
  /** Afficher le mot-symbole à côté */
  wordmark?: boolean;
  wordmarkClassName?: string;
}

/** Marque SPB Cloud : tuile dégradée d'accent + glyphe nuage. */
export default function Logo({ size = 36, className = "", wordmark, wordmarkClassName = "" }: LogoProps) {
  return (
    <span className={`inline-flex items-center gap-2.5 ${className}`}>
      <span
        className="relative inline-flex items-center justify-center rounded-[28%] bg-accent-gradient text-white shadow-[0_2px_8px_rgb(var(--accent-600)/.35),inset_0_1px_0_rgb(255_255_255/.25)] shrink-0"
        style={{ width: size, height: size }}
        aria-hidden
      >
        <svg viewBox="0 0 24 24" width={size * 0.58} height={size * 0.58} fill="none" stroke="currentColor" strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round">
          <path d="M17.5 19a4.5 4.5 0 0 0 .6-8.96A7 7 0 0 0 4.7 12.2 3.5 3.5 0 0 0 6 19h11.5z" />
          <path d="M12 13v4" className="opacity-80" />
          <path d="M9.8 15.2 12 13l2.2 2.2" className="opacity-80" />
        </svg>
      </span>
      {wordmark && (
        <span className={`font-semibold tracking-tight text-gray-900 dark:text-white ${wordmarkClassName}`}>
          SPB <span className="text-accent-gradient">Cloud</span>
        </span>
      )}
    </span>
  );
}