// Basic toast component
import { useEffect, useState } from "react";
import { X } from "lucide-react";

export interface ToastProps {
  id: number;
  title?: string;
  description?: string;
  variant?: "default" | "destructive";
  duration?: number;
  onDismiss: (id: number) => void;
}

export function Toast({
  id,
  title,
  description,
  variant = "default",
  onDismiss,
}: ToastProps) {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsVisible(false);
      setTimeout(() => onDismiss(id), 300); // Allow time for fade out animation
    }, 3000);

    return () => clearTimeout(timer);
  }, [id, onDismiss]);

  const baseClasses = "rounded-md shadow-lg p-4 transition-all duration-300 max-w-sm";
  const variantClasses = variant === "destructive" 
    ? "bg-red-500 text-white" 
    : "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100";
  const visibilityClasses = isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2";

  return (
    <div className={`${baseClasses} ${variantClasses} ${visibilityClasses}`}>
      <div className="flex justify-between items-start">
        <div>
          {title && <h3 className="font-medium">{title}</h3>}
          {description && <p className="text-sm mt-1 opacity-80">{description}</p>}
        </div>
        <button
          onClick={() => {
            setIsVisible(false);
            setTimeout(() => onDismiss(id), 300);
          }}
          className="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
        >
          <X size={18} />
        </button>
      </div>
    </div>
  );
}

// Types for prop references in other files
export type ToastActionElement = React.ReactElement;
