import React from "react";

interface PowerballLogoProps {
  variant?: "light" | "dark" | "badge" | "ticket";
  size?: "sm" | "md" | "lg" | "xl";
  className?: string;
  showSubtitle?: boolean;
  subtitleText?: string;
  href?: string | null;
}

export function PowerballLogo({
  variant = "light",
  size = "md",
  className = "",
  showSubtitle = false,
  subtitleText = "OFFICIAL CLAIMS CENTER",
  href = "/",
}: PowerballLogoProps) {
  // Height configurations
  const heightMap = {
    sm: 32,
    md: 44,
    lg: 54,
    xl: 68,
  };

  const h = heightMap[size];
  const isDark = variant === "dark" || variant === "ticket";

  const content = (
    <div className={`inline-flex flex-col group cursor-pointer transition-opacity hover:opacity-90 ${className}`}>
      <div className="flex items-center gap-1 select-none">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src="/images/powerball-logo.png"
          alt="Powerball Logo"
          style={{ height: `${h}px`, width: "auto", objectFit: "contain" }}
          className="max-w-full drop-shadow-sm"
        />
      </div>

      {showSubtitle && (
        <span
          className={`text-[9px] font-black tracking-[3px] uppercase mt-1 ${
            isDark ? "text-amber-300" : "text-slate-600"
          }`}
        >
          {subtitleText}
        </span>
      )}
    </div>
  );

  if (href) {
    return (
      <a href={href} className="inline-block no-underline" title="Return to Homepage">
        {content}
      </a>
    );
  }

  return content;
}

export function PowerballBallIcon({
  size = 36,
  className = "",
  href = "/",
}: {
  size?: number;
  className?: string;
  href?: string | null;
}) {
  const icon = (
    /* eslint-disable-next-line @next/next/no-img-element */
    <img
      src="/images/powerball-logo.png"
      alt="Powerball"
      style={{ height: `${size}px`, width: "auto", objectFit: "contain" }}
      className={`cursor-pointer transition-transform hover:scale-105 drop-shadow-sm ${className}`}
    />
  );

  if (href) {
    return (
      <a href={href} className="inline-block" title="Return to Homepage">
        {icon}
      </a>
    );
  }

  return icon;
}