components/Toast.jsx

import React from 'react';
import { Sparkles, X } from 'lucide-react';

export default function Toast({ isVisible, onClose, onAction }) {
  if (!isVisible) return null;

  return (
    <div className="fixed bottom-6 right-6 z-[90] animate-slide-up">
      <div className="bg-panel/95 backdrop-blur-xl border border-primary/30 shadow-2xl shadow-primary/10 rounded-xl p-4 max-w-sm flex items-start gap-4">
        <div className="bg-primary/10 p-2 rounded-lg text-primary shrink-0">
          <Sparkles size={20} />
        </div>
        
        <div className="flex-1 min-w-0">
          <h4 className="text-sm font-semibold text-main mb-1">Welcome to NeuroArch</h4>
          <p className="text-xs text-muted leading-relaxed mb-3">
            New to the studio? Take a quick 2-minute tour to learn how to build AI pipelines.
          </p>
          <div className="flex gap-2">
            <button
              onClick={onAction}
              className="px-3 py-1.5 bg-primary hover:bg-blue-600 text-white text-xs font-medium rounded transition-colors"
            >
              Start Tour
            </button>
            <button
              onClick={onClose}
              className="px-3 py-1.5 bg-surface hover:bg-surface/80 text-muted hover:text-main text-xs font-medium rounded border border-border transition-colors"
            >
              Maybe Later
            </button>
          </div>
        </div>

        <button 
          onClick={onClose}
          className="text-muted hover:text-main transition-colors shrink-0"
          aria-label="Close toast"
        >
          <X size={16} />
        </button>
      </div>
      
      <style jsx global>{`
        @keyframes slide-up {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-slide-up {
          animation: slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
      `}</style>
    </div>
  );
}