import type { Meta, StoryObj } from '@storybook/angular';
import { AlertBox } from './alert-box';
import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';

const meta: Meta<AlertBox> = {
  title: 'Components/AlertBox',
  component: AlertBox,
  tags: ['autodocs'],
  decorators: [
    moduleMetadata({
      imports: [CommonModule],
      providers: []
    })
  ],
  argTypes: {
    message: {
      control: 'text',
      description: 'Message à afficher dans l\'alerte'
    },
    _alertKind: {
      control: 'select',
      options: ['info', 'success', 'primary', 'secondary', 'warning', 'danger', 'error'],
      description: 'Type d\'alerte'
    }
  },
};

export default meta;
type Story = StoryObj<AlertBox>;

export const Warning: Story = {
  args: {
    message: 'Ceci est un message d\'avertissement',
    _alertKind: 'warning'
  },
};

export const Success: Story = {
  args: {
    message: 'Opération réussie !',
    _alertKind: 'success'
  },
};

export const Info: Story = {
  args: {
    message: 'Information importante',
    _alertKind: 'info'
  },
};

export const Primary: Story = {
  args: {
    message: 'Message principal',
    _alertKind: 'primary'
  },
};

export const Secondary: Story = {
  args: {
    message: 'Message secondaire',
    _alertKind: 'secondary'
  },
};

export const Danger: Story = {
  args: {
    message: 'Attention danger !',
    _alertKind: 'danger'
  },
};

export const ErrorState: Story = {
  args: {
    message: 'Une erreur est survenue',
    _alertKind: 'error'
  },
};

export const WithContent: Story = {
  args: {
    _alertKind: 'warning'
  },
  render: (args) => ({
    props: args,
    template: `<sae-alert-box [_alertKind]="'warning'">Contenu personnalisé via ng-content</sae-alert-box>`
  })
};