Shake Feedback

'use client';

import type { HTMLAttributes, ReactNode } from 'react';
import './ShakeErrorGroup.css';

/**
 * ShakeErrorGroup — A feedback container that shakes horizontally to indicate failure or invalid input.
 * Tip: change its `key` to replay the shake on every new error.
 *
 * @param message - Required.
 * @param active - Optional. Triggers the shake. Default false.
 * @param icon - Optional. Default '⚠️'.
 */
export interface ShakeErrorGroupProps extends HTMLAttributes<HTMLDivElement> {
  message: ReactNode;
  active?: boolean;
  icon?: ReactNode;
}

export function ShakeErrorGroup({ message, active = false, icon = '⚠️', className, ...rest }: ShakeErrorGroupProps) {
  return (
    <div role="alert" {...rest} className={['shake-box', active && 'shake-box--active', className].filter(Boolean).join(' ')}>
      <span className="shake-box__icon" aria-hidden="true">{icon}</span>
      <span className="shake-box__msg">{message}</span>
    </div>
  );
}

export default ShakeErrorGroup;

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

.shake-box { 
  display: flex; 
  align-items: center; 
  gap: var(--sp-3, 0.75rem);
  background: rgba(239, 68, 68, 0.08); 
  border: 1px solid var(--c-error, #ef4444); 
  color: #f87171; 
  padding: var(--sp-4, 1rem); 
  border-radius: var(--r-md, 10px); 
  text-align: center; 
  font-weight: 600; 
  width: 100%;
  box-sizing: border-box;
}

.shake-box--active { animation: shake-error-group-shake-kb 0.5s cubic-bezier(.36,.07,.19,.97) both; }

.shake-box__icon { font-size: 1rem; }
.shake-box__msg { font-size: 0.9rem; }

@keyframes shake-error-group-shake-kb { 
  10%, 90% { transform: translateX(-1px); } 
  20%, 80% { transform: translateX(2px); } 
  30%, 50%, 70% { transform: translateX(-4px); } 
  40%, 60% { transform: translateX(4px); } 
}