import { cn, getBackgroundImage, getStaticImage } from "@/lib/utils";

// 原始尺寸（保持比例）
const ORIGINAL_SIZES = {
  read: { width: 116, height: 140 },
  unread: { width: 120, height: 121 },
} as const;

const Cursor = ({
  className,
  onClick,
  read = false,
  size = 1,
}: {
  className?: string;
  onClick: () => void;
  /** 已阅读 / 已完成 状态；true 时显示预留的 div，由你自行实现效果 */
  read?: boolean;
  /** 尺寸缩放比例，默认为 1（原始大小） */
  size?: number;
}) => {
  // 根据 size 计算实际尺寸，保持原始比例
  const baseSize = read ? ORIGINAL_SIZES.read : ORIGINAL_SIZES.unread;
  const width = baseSize.width * size;
  const height = baseSize.height * size;

  return (
    <div
      className={cn(
        "cursor-pointer select-none",
        read ? "" : "animate-[spin_3s_linear_infinite]",
        "flex justify-center items-center pl-0",
        "transition-all duration-300 hover:scale-105 hover:brightness-110 hover:contrast-110 active:scale-95",
        className
      )}
      onTouchEnd={(e) => {
        e.preventDefault(); // 防止 Safari 触发两次
        onClick();
      }}
      style={{
        width: `${width}px`,
        height: `${height}px`,
        WebkitTapHighlightColor: "transparent",
        WebkitTouchCallout: "none",
        WebkitUserSelect: "none",
        touchAction: "manipulation",
        backgroundImage: getBackgroundImage(
          read ? "components/point_" : "components/border"
        ),
        backgroundSize: "contain",
        backgroundPosition: "center",
        backgroundRepeat: "no-repeat",
      }}
      onClick={onClick}
      draggable={false}
    >
      {read ? (
        // 已阅读 / 已完成 状态
        // <div
        //   className="absolute -bottom-1 text-[#cf9c4d] text-2xl font-bold"
        //   style={{
        //     // 细一点的描边，避免把内部金色填充盖掉
        //     // WebkitTextStroke: "0.5px #ffffff",
        //     // 用多层白色阴影模拟更厚的外轮廓
        //     textShadow: [
        //       "0 0 2px #ffffff",
        //       "0 0 4px #ffffff",
        //       "0 0 6px rgba(0,0,0,0.35)",
        //     ].join(", "),
        //   }}
        // >
        //   已浏览
        // </div>
        <></>
      ) : (
        // 未阅读 / 未完成 状态：保持当前效果
        <img
          src={getStaticImage("components/point.png")}
          alt=""
          style={{
            width: "100%",
            height: "100%",
            objectFit: "contain",
            objectPosition: "center",
          }}
        />
      )}
    </div>
  );
};

export default Cursor;