export function JefflixLogo({ className = "", size = "default" }: { className?: string; size?: "default" | "small" }) {
  const isSmall = size === "small"

  return (
    <div className={`inline-flex items-center gap-3 ${className}`}>
      <span
        className={
          isSmall
            ? "text-3xl md:text-[3.33rem] font-black tracking-tight"
            : "text-9xl md:text-[10rem] font-black tracking-tight"
        }
        style={{
          fontFamily: "'Fredoka', 'Rounded Mplus 1c', sans-serif",
          color: "#E50914",
          textShadow: "3px 3px 0px rgba(0,0,0,0.3)",
          letterSpacing: "-0.05em",
        }}
      >
        JEFFLIX
      </span>
      <span
        className={isSmall ? "text-2xl md:text-2xl font-black" : "text-6xl md:text-7xl font-black"}
        style={{
          fontFamily: "'Permanent Marker', cursive",
          color: "#dc2626",
          textShadow: "2px 2px 4px rgba(0,0,0,0.5)",
          transform: "rotate(-2deg)",
          display: "inline-block",
        }}
      >
        .LOL
      </span>
    </div>
  )
}