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

type AdaptiveWordTextProps = {
  text: string;
  variant: "hero" | "option";
};

export function AdaptiveWordText({ text, variant }: AdaptiveWordTextProps) {
  const displayText = text.trim().replace(/\s+/g, "\n");
  const compactLength = text.replace(/\s+/g, "").length;
  const isVeryLongSingleWord = compactLength > 16 && !/\s/.test(text.trim());
  const size = compactLength <= 6 ? "large" : compactLength <= 10 ? "medium" : "small";

  const sizeClass = {
    hero: {
      large: "text-[clamp(52px,7vw,82px)]",
      medium: "text-[clamp(42px,5.6vw,64px)]",
      small: "text-[clamp(28px,4.2vw,46px)]",
    },
    option: {
      large: "text-[clamp(30px,4vw,48px)]",
      medium: "text-[clamp(25px,3.2vw,38px)]",
      small: "text-[clamp(20px,2.6vw,30px)]",
    },
  }[variant][size];

  return (
    <span
      className={cn(
        "mx-auto block max-w-full whitespace-pre-line text-center font-black leading-[1.05] tracking-normal",
        "pk-word-text",
        variant === "hero" && "pk-word-text-hero mt-4 text-blue-500 [text-shadow:3px_3px_0_#dbeafe]",
        variant === "option" && "pk-word-text-option mt-3 text-slate-900",
        `pk-word-size-${size}`,
        sizeClass,
        isVeryLongSingleWord && "max-w-[min(100%,14ch)] [overflow-wrap:anywhere]",
      )}
    >
      {displayText}
    </span>
  );
}