"use client";

import { useState } from "react";
import { dyEmojiUrl } from "@/lib/dyEmoji";

type EmojiImgProps = {
  /** 表情 key（短代码 [:key:] 的 key） */
  k: string;
  className?: string;
};

/** 抖音表情小图：加载失败回退为 [表情] 文本，避免破图 */
export default function EmojiImg({ k, className }: EmojiImgProps) {
  const [broken, setBroken] = useState(false);
  if (broken) {
    return <span className={className}>[表情]</span>;
  }
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={dyEmojiUrl(k)}
      alt={`[:${k}:]`}
      title={`[:${k}:]`}
      className={className}
      draggable={false}
      onContextMenu={(e) => e.preventDefault()}
      onError={() => setBroken(true)}
    />
  );
}