import { Image } from "@/components";
import { getStaticImage } from "@/lib/utils";
import { ClueData } from "./types";
import DialogueContent from "./DialogueContent";

export interface ClueContentProps {
  /** 线索数据 */
  clue: ClueData;
}

/**
 * 线索内容组件
 * 根据线索类型渲染不同的内容
 */
const ClueContent = ({ clue }: ClueContentProps) => {
  switch (clue.type) {
    case "text":
      return (
        <div className="w-full h-full flex flex-col items-center justify-center gap-4">
          <h2 className="text-4xl font-bold text-[#896a27] mb-4 text-center">
            {clue.title}
          </h2>
          {typeof clue.content === "string" ? (
            <div className="text-3xl leading-16 text-[#896a27] whitespace-pre-line">
              {clue.content}
            </div>
          ) : (
            <div className="text-3xl leading-16 text-[#896a27]">
              {clue.content}
            </div>
          )}
        </div>
      );

    case "map":
      return (
        <div className="w-full h-full flex items-center justify-center">
          <Image
            src={getStaticImage(clue.mapImage)}
            className="max-w-full max-h-full object-contain"
            alt="地图"
          />
        </div>
      );

    case "audio":
      return (
        <div className="w-full h-full flex items-center justify-center">
          <div className="text-5xl leading-relaxed text-white whitespace-pre-line text-center ">
            {clue.text}
          </div>
          <Image
            className="absolute left-0 bottom-10 w-full "
            src={getStaticImage(clue.audioImage)}
            alt="录音"
          />
        </div>
      );

    case "dialogue":
      return <DialogueContent clue={clue} />;

    case "custom":
      return <>{clue.content}</>;

    default:
      return null;
  }
};

export default ClueContent;