paint-ui/components/ui/toast.tsx

'use client';

import { useEffect, useState } from 'react';
import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
import type { Toast as ToastType } from '@/store/toast-store';
import { useToastStore } from '@/store/toast-store';

interface ToastProps {
  toast: ToastType;
}

const iconMap = {
  success: CheckCircle,
  error: AlertCircle,
  warning: AlertTriangle,
  info: Info,
};

const colorMap = {
  success: 'bg-success text-success-foreground border-success',
  error: 'bg-destructive text-destructive-foreground border-destructive',
  warning: 'bg-warning text-warning-foreground border-warning',
  info: 'bg-info text-info-foreground border-info',
};

export function Toast({ toast }: ToastProps) {
  const { removeToast } = useToastStore();
  const [isExiting, setIsExiting] = useState(false);
  const Icon = iconMap[toast.type];

  const handleClose = () => {
    setIsExiting(true);
    setTimeout(() => {
      removeToast(toast.id);
    }, 300); // Match animation duration
  };

  return (
    <div
      className={`
        flex items-center gap-3 min-w-[300px] max-w-md p-4 rounded-lg border-2 shadow-lg
        ${colorMap[toast.type]}
        ${isExiting ? 'animate-slideOutRight' : 'animate-slideInFromRight'}
      `}
      role="alert"
      aria-live="polite"
    >
      <Icon className="w-5 h-5 flex-shrink-0" />
      <p className="flex-1 text-sm font-medium">{toast.message}</p>
      <button
        onClick={handleClose}
        className="flex-shrink-0 rounded-full p-1 hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
        aria-label="Close notification"
      >
        <X className="w-4 h-4" />
      </button>
    </div>
  );
}