'use client';

interface AnimatedCheckmarkProps {
  size?: number;
  color?: string;
  strokeWidth?: number;
  delay?: number;
}

export default function AnimatedCheckmark({
  size = 48,
  color = '#22c55e',
  strokeWidth = 3,
  delay = 0,
}: AnimatedCheckmarkProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      style={{ animationDelay: `${delay}ms` }}
    >
      <circle
        cx="12"
        cy="12"
        r="10"
        stroke={color}
        strokeWidth={strokeWidth}
        opacity={0.2}
      />
      <path
        d="M7 12.5l3.5 3.5 6.5-7"
        stroke={color}
        strokeWidth={strokeWidth}
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeDasharray="24"
        strokeDashoffset="24"
        className="animate-checkmark-draw"
        style={{ animationDelay: `${delay}ms` }}
      />
    </svg>
  );
}
