import { cn } from "@/lib/utils";
import { Gem } from "./Gem";

/**
 * Lockup horizontal : ◆ + "Rubis" (+ optionnel "sur l'ongle" en suffixe italique muted).
 * À utiliser dans les headers, le sidebar, les emails.
 *
 * Architecture : on s'appuie sur le composant <Gem/> SVG — pas de PNG, pas
 * de border externe. La pierre EST le logo. Plus rien ne casse à l'export
 * en taille variable, et le rendu reste identique du SPA aux PDFs aux
 * favicons (si on génère).
 *
 * Cf. /docs/marque.md §2 et le pattern de la landing.
 */
type BrandProps = {
  /** Affiche le suffixe "sur l'ongle" en italique muted. */
  withSuffix?: boolean;
  /**
   * Taille de la gem en pixels. Default 22 (lockup) ou 32 (onlyImage).
   * Pour les usages héros : passer 56-72.
   */
  gemSize?: number;
  /** Mode "logo seul" : que la gem, sans le wordmark. */
  onlyImage?: boolean;
  className?: string;
};

export function Brand({
  withSuffix = false,
  onlyImage = false,
  gemSize,
  className,
}: BrandProps) {
  const resolvedSize = gemSize ?? (onlyImage ? 32 : 22);

  if (onlyImage) {
    return (
      <Gem
        size={resolvedSize}
        className={className}
        aria-label="Rubis"
      />
    );
  }

  return (
    <span
      className={cn(
        "inline-flex items-center gap-2.5 font-display text-ink",
        "text-[19px] font-extrabold tracking-[-0.02em]",
        className,
      )}
    >
      <Gem size={resolvedSize} />
      <span className="leading-none">
        Rubis
        {withSuffix && (
          <span
            className={cn(
              "ml-1 font-display italic font-medium text-ink-3",
              "text-[12.5px] tracking-[-0.005em]",
            )}
          >
            sur l&apos;ongle
          </span>
        )}
      </span>
    </span>
  );
}
