'use client';

import { useToastStore } from '@/lib/store';

const colors: Record<string, string> = {
  success: 'bg-green-600',
  error: 'bg-red-600',
  info: 'bg-blue-600',
  warning: 'bg-yellow-500',
};

export default function ToastContainer() {
  const toasts = useToastStore(s => s.toasts);
  const dismiss = useToastStore(s => s.dismiss);

  if (!toasts.length) return null;

  return (
    <div className="fixed bottom-24 md:bottom-6 right-4 z-50 space-y-2">
      {toasts.map(t => (
        <div
          key={t.id}
          onClick={() => dismiss(t.id)}
          className={`${colors[t.type] || colors.info} text-white px-5 py-3 rounded-xl shadow-2xl flex items-center gap-3 max-w-xs cursor-pointer animate-slide-up`}
        >
          <span className="text-sm font-medium">{t.message}</span>
        </div>
      ))}
      <style jsx>{`
        @keyframes slide-up {
          from { transform: translateY(10px); opacity: 0; }
          to { transform: translateY(0); opacity: 1; }
        }
        .animate-slide-up { animation: slide-up 0.3s ease forwards; }
      `}</style>
    </div>
  );
}