import React from "react";
import { CheckCircle2, AlertTriangle, XCircle, Info, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface ToastProps {
  variant?: "success" | "warning" | "error" | "info";
  title?: string;
  message: string;
  onClose?: () => void;
  className?: string;
}

export const Toast: React.FC<ToastProps> = ({
  variant = "info",
  title,
  message,
  onClose,
  className,
}) => {
  const icons = {
    success: <CheckCircle2 className="w-5 h-5 text-brand-success shrink-0" />,
    warning: <AlertTriangle className="w-5 h-5 text-brand-warning shrink-0" />,
    error: <XCircle className="w-5 h-5 text-brand-danger shrink-0" />,
    info: <Info className="w-5 h-5 text-brand-blue shrink-0" />,
  };

  const borders = {
    success: "border-emerald-200 bg-white shadow-dropdown",
    warning: "border-amber-200 bg-white shadow-dropdown",
    error: "border-red-200 bg-white shadow-dropdown",
    info: "border-blue-200 bg-white shadow-dropdown",
  };

  return (
    <div
      role="status"
      className={cn(
        "flex items-start gap-3 p-4 rounded-lg border max-w-sm w-full transition-all duration-200",
        borders[variant],
        className
      )}
    >
      {icons[variant]}
      <div className="flex-1 min-w-0 space-y-0.5">
        {title && (
          <h4 className="text-xs font-bold text-brand-text leading-tight">
            {title}
          </h4>
        )}
        <p className="text-xs text-brand-secondary leading-relaxed">{message}</p>
      </div>
      {onClose && (
        <button
          onClick={onClose}
          className="p-1 text-brand-secondary hover:text-brand-text rounded transition-colors"
          aria-label="Tutup notifikasi"
        >
          <X className="w-4 h-4" />
        </button>
      )}
    </div>
  );
};