"use client"

import Link from "next/link"
import { cn } from "@/lib/utils"

type UltiMailLogoProps = {
  className?: string
  /** `horizontal` = picto source + « Ultimail » (lisible, aligné barre). `mark` = picto seul (launcher). */
  variant?: "horizontal" | "mark"
  /** Lien au clic ; `null` = pas de lien. Défaut : boîte de réception. */
  href?: string | null
}

/** Icône extraite du master PNG (pas le SVG VTracer, trop « M Gmail » à petite taille). */
const HEADER_ICON = "/brand/ultimail-header-icon.png"
const DEFAULT_INBOX_HREF = "/mail/inbox"

export function UltiMailLogo({
  className,
  variant = "horizontal",
  href = DEFAULT_INBOX_HREF,
}: UltiMailLogoProps) {
  const mark = (
    <img
      src={HEADER_ICON}
      alt=""
      width={288}
      height={288}
      draggable={false}
      className={cn(
        "shrink-0 object-contain object-center select-none",
        variant === "mark" ? "h-10 w-10" : "h-8 w-8"
      )}
      aria-hidden
    />
  )

  if (variant === "mark") {
    if (href === null) {
      return <div className={cn("shrink-0", className)}>{mark}</div>
    }
    return (
      <Link
        href={href}
        className={cn(
          "shrink-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
          className
        )}
        aria-label="Ultimail — Boîte de réception"
      >
        {mark}
      </Link>
    )
  }

  const body = (
    <div
      role="img"
      aria-label="Ultimail"
      className="flex min-w-0 items-center gap-2.5 text-foreground"
    >
      {mark}
      <span className="min-w-0 truncate text-[1.375rem] font-semibold leading-none tracking-tight text-foreground dark:text-white">
        Ultimail
      </span>
    </div>
  )

  if (href === null) {
    return <div className={cn("min-w-0", className)}>{body}</div>
  }

  return (
    <Link
      href={href}
      className={cn(
        "flex min-w-0 items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
        className
      )}
      aria-label="Ultimail — Boîte de réception"
    >
      {body}
    </Link>
  )
}