Toast

'use client';

import * as React from 'react';
import { Button } from '../button/button';
import { Toaster, toast } from './toast-stack';
import { resetToasts } from './toast-stack-core';

// How long the pretend upload takes (ms).
const UPLOAD = 1600;

function upload() {
  toast.promise(new Promise((resolve) => window.setTimeout(resolve, UPLOAD)), {
    loading: 'Uploading 3 files',
    success: '3 files uploaded',
    error: 'Upload failed',
  });
}

export default function ToastStackDemo({ replay = 0 }: { replay?: number }) {
  React.useEffect(() => () => resetToasts(), []);

  React.useEffect(() => {
    if (replay === 0) return;
    upload();
  }, [replay]);

  return (
    <div className="relative flex min-h-80 w-full flex-col items-center justify-center">
      <div className="flex flex-wrap items-center justify-center gap-3">
        <Button
          size="sm"
          hierarchy="secondary"
          onClick={() => toast('Link copied', { description: 'Anyone with the link can view this page.' })}
        >
          Copy link
        </Button>
        <Button
          size="sm"
          hierarchy="secondary"
          onClick={() =>
            toast.success('Changes saved', {
              action: { label: 'Undo', onClick: () => toast('Changes undone') },
            })
          }
        >
          Save changes
        </Button>
        <Button size="sm" hierarchy="secondary" onClick={upload}>
          Upload files
        </Button>
      </div>
      <Toaster className="absolute right-0 bottom-0 w-[min(360px,100%)]" />
    </div>
  );
}