Toast

'use client';
import { useEffect, useState } from 'react';
import { CheckCircle2 } from 'lucide-react';
import { T, TYPE, SP, RADIUS, MOTION } from '@/lib/tokens';

interface ToastProps {
  variant: 'success' | 'error' | 'info';
  message: string;
  action?: { label: string; onClick: () => void };
  duration?: number; // ms, default 4000 (8000 para error)
  onDismiss: () => void;
}

export function Toast({ variant, message, action, duration, onDismiss }: ToastProps) {
  const dur = duration ?? (variant === 'error' ? 8000 : 4000);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (action || paused) return; // não auto-dismiss se houver action ou hover
    const t = setTimeout(onDismiss, dur);
    return () => clearTimeout(t);
  }, [paused, action, dur, onDismiss]);

  return (
    <div
      role={variant === 'error' ? 'alert' : 'status'}
      aria-live={variant === 'error' ? 'assertive' : 'polite'}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        background: T.surface,
        border: `1px solid ${T.border}`,
        borderRadius: RADIUS.md,
        boxShadow: T.shadowLg,
        padding: `${SP[3]}px ${SP[4]}px`,
        // ... resto dos estilos
      }}
    >
      {/* ícone + mensagem + action + close */}
    </div>
  );
}