Satellite Toast

"use client";
import { useRef } from "react";
import { SatelliteToast, type ToastNotification } from "@/components/ui/satellite-toast";

export default function App() {
  const toastRef = useRef<{ showNotification: (options: Omit<ToastNotification, "id">) => void }>(null);

  const getColorVar = (name: string) =>
    getComputedStyle(document.documentElement).getPropertyValue(name).trim();

  const showLTRToast = () => {
    if (toastRef.current) {
      toastRef.current.showNotification({
        title: "Anaïs Nin",
        content: "We don't see things as they are, we see them as we are.",
        position: "bottom-right",
        accentColor: getColorVar("--toast-accent-color"),
        backgroundColor: getColorVar("--toast-background-color"),
        titleFontColor: getColorVar("--toast-title-font-color"),
        contentFontColor: getColorVar("--toast-content-font-color"),
        bodyBorderColor: getColorVar("--toast-body-border-color"),
        typeIconContainerBorderColor: getColorVar("--toast-type-icon-border-color"),
        typeIconColor: getColorVar("--toast-type-icon-color"),
        closeIconBgColor: getColorVar("--toast-close-bg-color"),
        closeIconFgColor: getColorVar("--toast-close-fg-color"),
        closeIconHoverBgColor: getColorVar("--toast-close-hover-bg-color"),
        closeIconHoverFgColor: getColorVar("--toast-close-hover-fg-color"),
        closeIconOutlineColor: getColorVar("--toast-close-outline-color"),
        timerBgColor: getColorVar("--toast-timer-bg-color"),
        timerColor: getColorVar("--toast-timer-color"),
        satelliteColor: getColorVar("--toast-satellite-color"),
      });
    }
  };

  const showRTLToast = () => {
    if (toastRef.current) {
      toastRef.current.showNotification({
        title: "אוסקר ווילד",
        content: "יש רק שתי טרגדיות בעולם הזה. האחת היא לא לקבל את מה שרוצים והשנייה היא לקבל.",
        isRTL: true,
        position: "bottom-left",
        accentColor: getColorVar("--toast-accent-color"),
        backgroundColor: getColorVar("--toast-background-color"),
        titleFontColor: getColorVar("--toast-title-font-color"),
        contentFontColor: getColorVar("--toast-content-font-color"),
        bodyBorderColor: getColorVar("--toast-body-border-color"),
        typeIconContainerBorderColor: getColorVar("--toast-type-icon-border-color"),
        typeIconColor: getColorVar("--toast-type-icon-color"),
        closeIconBgColor: getColorVar("--toast-close-bg-color"),
        closeIconFgColor: getColorVar("--toast-close-fg-color"),
        closeIconHoverBgColor: getColorVar("--toast-close-hover-bg-color"),
        closeIconHoverFgColor: getColorVar("--toast-close-hover-fg-color"),
        closeIconOutlineColor: getColorVar("--toast-close-outline-color"),
        timerBgColor: getColorVar("--toast-timer-bg-color"),
        timerColor: getColorVar("--toast-timer-color"),
        satelliteColor: getColorVar("--toast-satellite-color"),
      });
    }
  };

  const buttonStyles = {
    backgroundColor: getColorVar("--toast-title-font-color"),
    color: getColorVar("--toast-background-color"),
  };

  return (
    <div className="flex flex-col gap-6 items-center justify-center min-h-screen">
      <div className="flex flex-col gap-4 w-full max-w-xs text-center">
        <button
          onClick={showLTRToast}
          style={buttonStyles}
          className="px-6 py-3 rounded-lg font-semibold shadow transition hover:opacity-90"
        >
          Show LTR Toast
        </button>
        <button
          onClick={showRTLToast}
          style={buttonStyles}
          className="px-6 py-3 rounded-lg font-semibold shadow transition hover:opacity-90"
        >
          Show RTL Toast
        </button>
        <a
          href="https://satellite-toast.netlify.app/"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            color: buttonStyles.backgroundColor,
            textDecoration: "underline",
          }}
          className="font-semibold transition hover:opacity-90 mt-2 inline-block"
        >
          Documentation
        </a>
      </div>
      <SatelliteToast ref={toastRef} />
    </div>
  );
}