import { toast } from '@geckoui/geckoui';

// app/layout.tsx or _app.tsx
import { GeckoUIProvider } from '@geckoui/geckoui';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GeckoUIProvider>
          {children}
        </GeckoUIProvider>
      </body>
    </html>
  );
}

'use client';

import { toast, Button } from '@geckoui/geckoui';

function Example() {
  return (
    <Button onClick={() => toast('This is a basic toast notification')}>
      Show Toast
    </Button>
  );
}

toast('Hello World');
toast('Hello World', { duration: 5000 });

// this one has to be answered rather than waved off
toast.warning('Your session is about to end', {
  duration: Infinity,
  dismissible: false,
  closeButton: true,
  action: { label: 'Stay signed in', onClick: renew }
});

<Button onClick={() => toast.success('Operation completed successfully!')}>
  Success
</Button>

<Button onClick={() => toast.error('An error occurred!')}>
  Error
</Button>

<Button onClick={() => toast.warning('This is a warning message')}>
  Warning
</Button>

<Button onClick={() => toast.info('Here is some information')}>
  Info
</Button>

toast.success('Account created', {
  description: 'Your account has been created successfully. You can now sign in.'
});

toast.error('Upload failed', {
  description: 'The file size exceeds the 10MB limit. Please choose a smaller file.'
});

toast('Email sent', {
  description: 'Your email has been sent to john@example.com',
  action: {
    label: 'Undo',
    onClick: () => toast.info('Email sending cancelled')
  }
});

'use client';

import { toast, Button } from '@geckoui/geckoui';

function Example() {
  const downloadReport = async () => {
    const response = await fetch('/api/report');
    if (!response.ok) throw new Error('Download failed');
    return response.json();
  };

  return (
    <Button
      onClick={() =>
        toast.promise(downloadReport(), {
          loading: 'Downloading report...',
          success: (data) => `${data.name} downloaded successfully`,
          error: 'Download failed. Please try again.'
        })
      }
    >
      Download Report
    </Button>
  );
}

// Quick message (1 second)
toast('Quick message', { duration: 1000 });

// Normal message (4 seconds - default)
toast('Normal message', { duration: 4000 });

// Persistent message (stays until dismissed)
toast('Persistent message', { duration: Infinity });

function Example() {
  const handleProcess = () => {
    const toastId = toast.loading('Processing your request...');

    // Simulate async operation
    setTimeout(() => {
      toast.success('Process completed!', { id: toastId });
    }, 3000);
  };

  return <Button onClick={handleProcess}>Start Process</Button>;
}

toast.promise(upload(), { loading: 'Uploading…', success: 'Uploaded', error: 'Failed' });
// user dismisses the loading toast -> nothing appears when the upload settles

const id = toast.loading('Uploading…');
// even if the user dismissed it, this shows:
toast.success('Uploaded', { id });

// Dismiss a specific toast
const id = toast('This toast can be dismissed manually');
toast.dismiss(id);

// Dismiss all toasts
toast.dismiss();

// Auto-dismiss after delay
const toastId = toast('Auto-dismissing...', { duration: Infinity });
setTimeout(() => toast.dismiss(toastId), 3000);

toast('Custom styled toast', {
  className: 'border-2 border-blue-500',
  style: {
    background: 'var(--color-surface-secondary)'
  }
});

toast(
  <div>
    <strong className="block text-sm font-semibold">New Feature Available</strong>
    <p className="text-sm mt-1">
      Check out our new dashboard analytics with real-time data visualization.
    </p>
  </div>,
  { duration: 5000 }
);

toast('Top Left', { position: 'top-left' });
toast('Top Center', { position: 'top-center' });
toast('Top Right', { position: 'top-right' });
toast('Bottom Left', { position: 'bottom-left' });
toast('Bottom Center', { position: 'bottom-center' });
toast('Bottom Right', { position: 'bottom-right' });

<GeckoUIProvider
  toastOptions={{
    position: 'top-right',
    duration: 3000,
    closeButton: true,
    visibleToasts: 5,
    toastClassName: 'my-toast'
  }}
>
  <App />
</GeckoUIProvider>

:root {
  --gecko-toast-width: 28rem;
  --gecko-toast-offset: 40px;
  --gecko-toast-radius: 1.5rem;
  --gecko-toast-padding: 1.25rem;
  --gecko-toast-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.35);
  --gecko-toast-duration: 320ms;
}

:root {
  --color-success: oklch(0.65 0.18 150);
  --color-error: oklch(0.6 0.22 25);
  --color-warning: oklch(0.7 0.16 60);
  --color-info: oklch(0.62 0.19 260);
}

.GeckoUIToast[data-variant="error"] {
  --gecko-toast-bg: var(--color-error);
  --gecko-toast-fg: white;
  --gecko-toast-accent: white;
}