import { motion } from "framer-motion";

export function BlueTick({ size = 96 }: { size?: number }) {
  return (
    <motion.div
      initial={{ scale: 0, rotate: -45 }}
      animate={{ scale: 1, rotate: 0 }}
      transition={{ type: "spring", stiffness: 180, damping: 14 }}
      className="relative inline-flex items-center justify-center"
      style={{ width: size, height: size }}
    >
      <div
        className="absolute inset-0 rounded-full blur-2xl opacity-70 animate-pulse-glow"
        style={{ background: "var(--gradient-primary)" }}
      />
      <svg
        viewBox="0 0 24 24"
        className="relative z-10 drop-shadow-[0_0_20px_oklch(0.65_0.22_255/0.8)]"
        width={size}
        height={size}
      >
        <path
          fill="url(#bt-grad)"
          d="M12 1.5l2.4 1.8 3 .1 1 2.8 2.3 1.9-.6 2.9.6 2.9-2.3 1.9-1 2.8-3 .1L12 22.5l-2.4-1.8-3-.1-1-2.8-2.3-1.9.6-2.9-.6-2.9 2.3-1.9 1-2.8 3-.1L12 1.5z"
        />
        <path
          d="M7.5 12.2l3 3 6-6"
          stroke="white"
          strokeWidth="2.4"
          strokeLinecap="round"
          strokeLinejoin="round"
          fill="none"
        />
        <defs>
          <linearGradient id="bt-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="oklch(0.7 0.22 255)" />
            <stop offset="100%" stopColor="oklch(0.55 0.25 270)" />
          </linearGradient>
        </defs>
      </svg>
    </motion.div>
  );
}