import type { Meta, StoryObj } from '@storybook/angular';
import { expect, within } from 'storybook/test';
import { AlertComponent } from './alert.component';

const meta: Meta<AlertComponent> = {
  title: 'Design System/Atoms/Alert',
  component: AlertComponent,
  render: (args) => ({
    props: args,
    template: `<app-alert [type]="type">Uw wijziging is ontvangen.</app-alert>`,
  }),
};
export default meta;
type Story = StoryObj<AlertComponent>;

// role assertions guard the polite/assertive split: errors interrupt, others don't.
export const Info: Story = {
  args: { type: 'info' },
  play: async ({ canvasElement }) => {
    await expect(within(canvasElement).getByRole('status')).toBeInTheDocument();
  },
};
export const Ok: Story = {
  args: { type: 'ok' },
  play: async ({ canvasElement }) => {
    await expect(within(canvasElement).getByRole('status')).toBeInTheDocument();
  },
};
export const Warning: Story = {
  args: { type: 'warning' },
  play: async ({ canvasElement }) => {
    await expect(within(canvasElement).getByRole('status')).toBeInTheDocument();
  },
};
export const Error: Story = {
  args: { type: 'error' },
  play: async ({ canvasElement }) => {
    await expect(within(canvasElement).getByRole('alert')).toBeInTheDocument();
  },
};