import type { StreamParticle, TextParticleData } from "@/api/types";
import { cn } from "@/lib/utils";

interface TextParticleViewProps {
  particle: StreamParticle;
}

function getTextStyle(length: number) {
  if (length < 50) return { size: "text-5xl", weight: "font-semibold" };
  if (length < 150) return { size: "text-3xl", weight: "font-semibold" };
  if (length < 300) return { size: "text-2xl", weight: "font-normal" };
  return { size: "text-lg", weight: "font-normal" };
}

export function TextParticleView({ particle }: TextParticleViewProps) {
  const data = particle.data as TextParticleData;
  const style = getTextStyle(data.content.length);

  return (
    <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 p-8">
      <p
        className={cn(
          "max-w-2xl text-center leading-relaxed text-white",
          style.size,
          style.weight,
        )}
      >
        {data.content}
      </p>
    </div>
  );
}
