import type { CardFaceProps } from "./types";

/** 卡面：渐变光晕 + 噪点纹理 */
export function GlowFace(_: CardFaceProps) {
  return (
    <>
      {/* 噪点纹理 SVG filter */}
      <svg className="absolute size-0">
        <filter id="card-noise">
          <feTurbulence
            type="fractalNoise"
            baseFrequency="0.65"
            numOctaves="3"
            stitchTiles="stitch"
          />
          <feColorMatrix type="saturate" values="0" />
          <feBlend in="SourceGraphic" mode="overlay" result="blend" />
          <feComposite in="blend" in2="SourceGraphic" operator="in" />
        </filter>
      </svg>

      {/* 噪点层 */}
      <div
        className="absolute inset-0 opacity-[0.18] mix-blend-overlay"
        style={{ filter: "url(#card-noise)" }}
      />

      {/* 左下光晕 */}
      <div
        className="absolute -bottom-8 -left-8 size-48 rounded-full opacity-60 blur-3xl"
        style={{ background: "radial-gradient(circle, white 0%, transparent 70%)" }}
      />
      {/* 右上光晕 */}
      <div
        className="absolute -right-6 -top-6 size-40 rounded-full opacity-40 blur-2xl"
        style={{ background: "radial-gradient(circle, white 0%, transparent 70%)" }}
      />
      {/* 中心微光 */}
      <div
        className="absolute inset-x-0 top-1/2 mx-auto size-32 -translate-y-1/2 rounded-full opacity-20 blur-3xl"
        style={{ background: "radial-gradient(circle, white 0%, transparent 70%)" }}
      />

      {/* 顶部高光条 */}
      <div className="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-white/50 to-transparent" />
    </>
  );
}