Success Checkmark

'use client';

import type { CSSProperties, HTMLAttributes } from 'react';
import './AnimatedCheckmark.css';

/**
 * AnimatedCheckmark — A decorative SVG checkmark with a circular fill and draw animation.
 *
 * @param size - Optional. Size in px. Default 56.
 * @param color - Optional. Fill/stroke color. Default '#7ac142'.
 */
export interface AnimatedCheckmarkProps extends HTMLAttributes<HTMLDivElement> {
  size?: number;
  color?: string;
}

export function AnimatedCheckmark({ size = 56, color = '#7ac142', className, style, ...rest }: AnimatedCheckmarkProps) {
  return (
    <div
      {...rest}
      className={['checkmark-container', className].filter(Boolean).join(' ')}
      style={{ '--check-size': `${size}px`, '--check-color': color, ...style } as CSSProperties}
    >
      <svg className="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" aria-hidden="true">
        <circle className="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
        <path className="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
      </svg>
    </div>
  );
}

export default AnimatedCheckmark;

/* AnimatedCheckmark — ported from astro-component-kit (feedback/AnimatedCheckmark.astro) */

.checkmark-container {
  width: var(--check-size);
  height: var(--check-size);
  margin: var(--sp-4, 1rem) auto;
}

.checkmark { 
  width: 100%; 
  height: 100%; 
  border-radius: var(--r-full, 50%); 
  display: block; 
  stroke-width: 2; 
  stroke: #fff; 
  stroke-miterlimit: 10; 
  box-shadow: inset 0px 0px 0px transparent; 
  animation: animated-checkmark-checkmark-fill .4s ease-in-out .4s forwards, animated-checkmark-checkmark-scale .3s ease-in-out .9s both; 
}

.checkmark__circle { 
  stroke-dasharray: 166; 
  stroke-dashoffset: 166; 
  stroke-width: 2; 
  stroke-miterlimit: 10; 
  stroke: var(--check-color); 
  fill: none; 
  animation: animated-checkmark-checkmark-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; 
}

.checkmark__check { 
  transform-origin: 50% 50%; 
  stroke-dasharray: 48; 
  stroke-dashoffset: 48; 
  animation: animated-checkmark-checkmark-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; 
}

@keyframes animated-checkmark-checkmark-stroke { 100% { stroke-dashoffset: 0; } }
@keyframes animated-checkmark-checkmark-fill { 100% { box-shadow: inset 0px 0px 0px 30px var(--check-color); } }
@keyframes animated-checkmark-checkmark-scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } }