import { ToastProvider, useToast } from "@hashti/react";

// Root application layout or provider wrapper
import { Theme, ToastProvider } from "@hashti/react";

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <Theme theme="frame-light">
      <ToastProvider>{children}</ToastProvider>
    </Theme>
  );
}

import { useToast, Button } from "@hashti/react";

export function BasicToastExample() {
  const toast = useToast();

  const handleSave = () => {
    toast.add({
      title: "Project saved",
      description: "All architectural changes were persisted successfully.",
      kind: "success",
    });
  };

  return (
    <Button variant="primary" onPress={handleSave}>
      Save Project
    </Button>
  );
}

import { useToast, Button } from "@hashti/react";

export function ToastKindsExample() {
  const toast = useToast();

  return (
    <div className="flex flex-wrap gap-3">
      <Button
        variant="secondary"
        onPress={() =>
          toast.add({
            title: "Information",
            description: "New software update is available in the background.",
            kind: "info",
          })
        }
      >
        Info Toast
      </Button>

      <Button
        variant="secondary"
        onPress={() =>
          toast.add({
            title: "Changes Published",
            description: "Your design system tokens have been synced.",
            kind: "success",
          })
        }
      >
        Success Toast
      </Button>

      <Button
        variant="secondary"
        onPress={() =>
          toast.add({
            title: "Rate Limit Approaching",
            description: "85% of your hourly API quota has been consumed.",
            kind: "warning",
          })
        }
      >
        Warning Toast
      </Button>

      <Button
        variant="danger"
        onPress={() =>
          toast.add({
            title: "Upload Failed",
            description: "Could not establish connection to the remote cluster.",
            kind: "error",
          })
        }
      >
        Error Toast
      </Button>
    </div>
  );
}

import { useToast, Button } from "@hashti/react";

export function CustomTimeoutExample() {
  const toast = useToast();

  const handleQuickToast = () => {
    toast.add(
      {
        title: "Copied to clipboard!",
        kind: "info",
      },
      { timeout: 2000 }, // Dismisses after 2 seconds
    );
  };

  const handlePersistentToast = () => {
    toast.add(
      {
        title: "Large migration running...",
        description: "This background job will take several minutes to complete.",
        kind: "warning",
      },
      { timeout: 15000 }, // Extended to 15 seconds
    );
  };

  return (
    <div className="flex gap-4">
      <Button variant="ghost" onPress={handleQuickToast}>
        Brief Toast (2s)
      </Button>
      <Button variant="ghost" onPress={handlePersistentToast}>
        Long Toast (15s)
      </Button>
    </div>
  );
}

import { useRef } from "react";
import { useToast, Button } from "@hashti/react";

export function ProgrammaticDismissExample() {
  const toast = useToast();
  const activeToastKey = useRef<string | null>(null);

  const startTask = () => {
    activeToastKey.current = toast.add(
      {
        title: "Syncing data...",
        description: "Contacting primary replica node.",
        kind: "info",
      },
      { timeout: 30000 },
    );
  };

  const completeTask = () => {
    if (activeToastKey.current) {
      toast.close(activeToastKey.current);
      activeToastKey.current = null;
    }
    toast.add({
      title: "Data synchronized successfully!",
      kind: "success",
    });
  };

  return (
    <div className="flex gap-3">
      <Button variant="secondary" onPress={startTask}>
        Start Background Sync
      </Button>
      <Button variant="primary" onPress={completeTask}>
        Finish & Close
      </Button>
    </div>
  );
}