Notification Toast

import React, { useEffect, useState } from "@rbxts/react";
import { useTheme } from "@robloxui/theme";

type ToastVariant = "success" | "error" | "warning" | "info";

const VARIANT_COLORS: Record<ToastVariant, string> = {
  success: "#10B981", error: "#EF4444", warning: "#F59E0B", info: "#3B82F6",
};

interface NotificationToastProps {
  message: string;
  variant?: ToastVariant;
  duration?: number;
  onDismiss: () => void;
}

export function NotificationToast({ message, variant = "info", duration = 4, onDismiss }: NotificationToastProps) {
  const { colors } = useTheme();

  useEffect(() => {
    const timer = task.wait(duration);
    onDismiss();
    return () => {};
  }, [duration]);

  return (
    <frame BackgroundColor3={colors.bgSecondary} Position={new UDim2(1, -320, 0, 20)} Size={new UDim2(0, 300, 0, 52)} ZIndex={200}>
      <uicorner CornerRadius={new UDim(0, 8)} />
      <frame BackgroundColor3={Color3.fromHex(VARIANT_COLORS[variant])} Size={new UDim2(0, 4, 1, 0)}>
        <uicorner CornerRadius={new UDim(0, 8, 0, 0, 4, 0, 0)} />
      </frame>
      <textlabel Text={message} TextColor3={colors.textPrimary} BackgroundTransparency={1} Size={new UDim2(1, -20, 1, 0)} Position={new UDim2(0, 16, 0, 0)} />
    </frame>
  );
}