import { useState } from 'react';
import Modal from '../components/Modal';

export default {
  title: 'Components/Modal',
  component: Modal,
  tags: ['autodocs'],
  parameters: { layout: 'centered' },
};

const ModalWrapper = ({ danger = false, title, message }) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)} style={{ padding: '8px 16px', cursor: 'pointer' }}>
        Open Modal
      </button>
      <Modal
        isOpen={open}
        onClose={() => setOpen(false)}
        onConfirm={() => setOpen(false)}
        title={title}
        message={message}
        confirmLabel="Confirm"
        danger={danger}
      />
    </>
  );
};

export const Default = {
  name: 'Default (informational)',
  render: () => (
    <ModalWrapper
      title="Confirm action"
      message="Are you sure you want to proceed with this action?"
    />
  ),
};

export const Danger = {
  name: 'Danger (destructive)',
  render: () => (
    <ModalWrapper
      danger
      title="Delete reservation"
      message='Are you sure you want to permanently delete reservation "RES-001"? This action cannot be undone.'
    />
  ),
};
