import type { CSSProperties } from "react"
import type { TextStickerPreset } from "../../types"

/** 常用 emoji 素材 */
export const EMOJI_LIST = [
  "😀",
  "😂",
  "🥰",
  "😎",
  "🤩",
  "😱",
  "🤔",
  "😴",
  "🥳",
  "😍",
  "❤️",
  "🔥",
  "⭐",
  "✨",
  "💯",
  "👍",
  "👏",
  "🎉",
  "🎵",
  "💪",
  "📌",
  "💡",
  "🎯",
  "✅",
  "❌",
  "⬆️",
  "⬇️",
  "➡️",
  "⭕",
  "🔔",
]

/** 文字花字预设对应的 CSS 样式预览 */
export const TEXT_PRESET_STYLES: Record<TextStickerPreset, CSSProperties> = {
  normal: { color: "#fff", textShadow: "none" },
  highlight: { color: "#FFD700", textShadow: "0 0 8px rgba(255,215,0,0.6)" },
  bubble: { color: "#fff", background: "rgba(0,0,0,0.5)", borderRadius: 8 },
  neon: { color: "#0ff", textShadow: "0 0 6px #0ff, 0 0 12px #0ff" },
  shadow: { color: "#fff", textShadow: "2px 2px 4px rgba(0,0,0,0.8)" },
  outline: { color: "#fff", WebkitTextStroke: "1px #000" },
  gradient: {
    color: "transparent",
    background: "linear-gradient(90deg,#f093fb,#f5576c)",
    WebkitBackgroundClip: "text",
  },
  handwrite: { color: "#333", fontStyle: "italic", fontFamily: "cursive" },
}

export const genStickerId = () => `sticker_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`