Toast

"use client";

import { X } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";

type ToastPosition = "top-right" | "bottom-right" | "top-left" | "bottom-left";

interface Toast {
  id: string;
  message: string;
  action?: {
    label: string;
    onClick: () => void;
  };
}

interface PixelToastContextValue {
  toasts: Toast[];
  addToast: (message: string, action?: Toast["action"]) => void;
  removeToast: (id: string) => void;
}

const PixelToastContext = React.createContext<
  PixelToastContextValue | undefined
>(undefined);

export function PixelToastProvider({
  children,
  position = "bottom-right",
  duration = 3000,
}: {
  children: React.ReactNode;
  position?: ToastPosition;
  duration?: number;
}) {
  const [toasts, setToasts] = React.useState<Toast[]>([]);

  const addToast = React.useCallback(
    (message: string, action?: Toast["action"]) => {
      const id = Math.random().toString(36).substr(2, 9);
      setToasts((prev) => [...prev, { id, message, action }]);

      if (duration > 0) {
        setTimeout(() => {
          removeToast(id);
        }, duration);
      }
    },
    [duration],

// ... (more code below)