import { Notification } from '../Notification/Notification.jsx';
import { Button } from '../../Base/Buttons/Button.jsx';

export default {
  title: 'TopLevel/Notification',
  component: Notification,
  parameters: {
    backgrounds: {
      default: 'blue-bg',
      values: [{ name: 'blue-bg', value: '#3444c5' }],
    },
  },
  argTypes: {
    title: { control: 'text' },
    msg: { control: 'text' },
    type: { control: { type: 'select' }, options: ['success', 'error'] },
    button: { control: false }, // button is a JSX element, not editable from controls
  },
};

export const Success = (args) => <Notification {...args} />;
Success.args = {
  title: 'Success!!!',
  type: 'success',
  msg: 'Successfully booked your ticket!',
  button: (
    <Button
      variant="secondary"
      label="Book more seats"
      size="md"
      onClick={() => {
        console.log("Book more clicked");
      }}
    />
  ),
};

export const Error = (args) => <Notification {...args} />;
Error.args = {
  title: 'Failed 😢',
  type: 'error',
  msg: 'Retry to book your ticket.',
  button: (
    <Button
      variant="secondary"
      label="Go back"
      size="md"
      onClick={() => {
        console.log("Go back clicked");
      }}
    />
  ),
};
