import Link from "next/link";

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

/**
 * FlixTV wordmark.
 *
 * Original mark: a rounded "F" tile cut from a crimson gradient with a play
 * triangle counter-form. Drawn with inline SVG so it scales crisply and needs
 * no image asset.
 */
export function Logo({
  className,
  showText = true,
  size = "md",
}: {
  className?: string;
  showText?: boolean;
  size?: "sm" | "md" | "lg";
}) {
  const box = size === "lg" ? "h-10 w-10" : size === "sm" ? "h-7 w-7" : "h-9 w-9";

  return (
    <Link
      href="/"
      aria-label="FlixTV home"
      className={cn("group inline-flex items-center gap-2.5", className)}
    >
      <span
        className={cn(
          "relative grid shrink-0 place-items-center overflow-hidden rounded-[10px] shadow-[0_6px_20px_-6px_rgba(244,63,94,0.85)]",
          "bg-linear-to-br from-brand-500 to-brand-700 transition-transform duration-500 ease-[cubic-bezier(0.25,0.46,0.45,0.94)] group-hover:scale-105",
          box,
        )}
      >
        <span
          aria-hidden
          className="absolute inset-0 bg-linear-to-tr from-transparent via-white/25 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
        />
        <svg viewBox="0 0 24 24" className="relative h-[62%] w-[62%]" aria-hidden>
          <path d="M5 3h13v4.6H10.2v3.5h6.6v4.4h-6.6V21H5V3Z" fill="#fff" />
          <path d="M15.4 12.6 21.5 16.3l-6.1 3.7V12.6Z" fill="#fff" opacity=".92" />
        </svg>
      </span>

      {showText ? (
        <span
          className={cn(
            "font-display font-extrabold tracking-[-0.03em] text-ink",
            size === "lg" ? "text-2xl" : size === "sm" ? "text-base" : "text-lg",
          )}
        >
          Flix<span className="text-brand-500">TV</span>
        </span>
      ) : null}
    </Link>
  );
}