import type { Meta, StoryObj } from '@storybook/react';
import React, { useState } from 'react';
import FeedbackComponent from './FeedbackComponent';

const meta: Meta<typeof FeedbackComponent> = {
  title: 'Components/FeedbackComponent',
  component: FeedbackComponent,
  argTypes: {
    type: {
      control: { type: 'select' },
      options: ['success', 'error', 'warning', 'info']
    },
    isShowing: { control: 'boolean' },
    allowHtml: { control: 'boolean' }
  },
  args: {
    type: 'success',
    message: 'This is a feedback message',
    isShowing: true,
    allowHtml: false
  }
};

export default meta;

type Story = StoryObj<typeof FeedbackComponent>;

export const Default: Story = {
  render: (args) => {
    const [isShowing, setIsShowing] = useState(args.isShowing);
    return (
      <div style={{ padding: 16 }}>
        <FeedbackComponent
          {...args}
          isShowing={isShowing}
          onClose={() => setIsShowing(false)}
        />
      </div>
    );
  }
};

export const WithHtml: Story = {
  args: {
    type: 'info',
    message: '<strong>Bold</strong> message with <em>HTML</em> content',
    allowHtml: true
  }
};