Toast

"use client";

import { X, CheckCircle2, AlertTriangle, AlertCircle, Info } from "lucide-react";

const variantStyles = {
  success: { bg: "bg-green-500/10 border-green-500/20", icon: CheckCircle2, iconColor: "text-green-500" },
  warning: { bg: "bg-amber-500/10 border-amber-500/20", icon: AlertTriangle, iconColor: "text-amber-500" },
  error: { bg: "bg-red-500/10 border-red-500/20", icon: AlertCircle, iconColor: "text-red-500" },
  info: { bg: "bg-blue-500/10 border-blue-500/20", icon: Info, iconColor: "text-blue-500" },
};

export function DSToast({
  variant = "info",
  title,
  description,
  onDismiss,
}: {
  variant?: "success" | "warning" | "error" | "info";
  title: string;
  description?: string;
  onDismiss?: () => void;
}) {
  const style = variantStyles[variant];
  const Icon = style.icon;

  return (
    <div
      className={`flex items-start gap-3 px-4 py-3 rounded-xl border ${style.bg} max-w-sm w-full`}
      role={variant === "error" ? "alert" : "status"}
    >
      <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${style.iconColor}`} />
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-foreground">{title}</p>
        {description && (
          <p className="text-xs text-secondary mt-0.5">{description}</p>
        )}
      </div>
      {onDismiss && (
        <button
          onClick={onDismiss}
          className="shrink-0 p-0.5 text-tertiary hover:text-foreground transition-colors"
          aria-label="Dismiss"
        >
          <X className="w-4 h-4" />
        </button>
      )}
    </div>
  );
}