import React from "react"
import { X } from "lucide-react"
import { motion } from "framer-motion"

export function Toast({ id, title, description, variant = "default", onClose }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: -20, scale: 0.95 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95, transition: { duration: 0.2 } }}
      className={`
        pointer-events-auto relative flex w-full items-center justify-between 
        space-x-4 overflow-hidden rounded-lg border p-6 pr-8 shadow-lg
        ${variant === "destructive" 
          ? "border-red-500 bg-red-500 text-white" 
          : "border-slate-200 bg-white text-slate-900"
        }
      `}
    >
      <div className="grid gap-1 flex-1">
        {title && (
          <div className={`text-sm font-semibold ${variant === "destructive" ? "text-white" : "text-slate-900"}`}>
            {title}
          </div>
        )}
        {description && (
          <div className={`text-sm ${variant === "destructive" ? "text-white/90" : "text-slate-600"}`}>
            {description}
          </div>
        )}
      </div>
      <button
        onClick={onClose}
        className={`
          absolute right-2 top-2 rounded-md p-1 transition-all
          hover:opacity-70 focus:opacity-100 focus:outline-none focus:ring-2
          hover:scale-110 active:scale-95
          ${variant === "destructive" 
            ? "text-white/70 hover:text-white focus:ring-red-400 hover:bg-white/10" 
            : "text-slate-500 hover:text-slate-900 focus:ring-slate-400 hover:bg-slate-100"
          }
        `}
      >
        <X className="h-4 w-4" />
      </button>
    </motion.div>
  )
}