import * as React from 'react';

import useDialogStore from '@/lib/zustand/useDialogStore';

import Alert from '@/components/Alert';

export default function Layout({ children }: { children: React.ReactNode }) {
  const { open, state, handleClose, handleSubmit } = useDialogStore();

  return (
    <>
      {children}
      <Alert
        onClose={handleClose}
        onSubmit={handleSubmit}
        open={open}
        options={state}
      />
    </>
  );
}

import useDialog from '@/hooks/useDialog';

const dialog = useDialog();

dialog({
  title: 'Warning!',
  description: (
    <>
      This is a <strong className='text-yellow-600'>warning dialog</strong>.
    </>
  ),
  catchOnCancel: true,
  submitText: 'Okay',
  variant: 'warning',
})
  .then(() => setStatus('Warning Dialog: Submitted'))
  .catch(() => setStatus('Warning Dialog: Rejected'));