import { fn } from 'storybook/test';

import Button from '../components/ui/button/button.jsx';


export default {
  title: 'UI/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
      children: {
          control: "text",
          description: "Texte/Composant à afficher dans le bouton",
      },
      variant: {
          control: { type: 'select' },
          options: ["primary", "default", "danger", "transparent"],
          description: "Style du bouton"
      },
      onClick: {
          control: "function",
          description: "Fonction appelée lors du clique du bouton",
      }
  },

  args: {
      children: "Button",
      variant: "Primary",
      onClick: fn()

  },
};

export const Primary = {
    args: {
      children: "Button",
      variant: 'primary',
      onClick: fn(),
    },
};

export const Default = {
    args: {
        children: "Button",
        variant: 'default',
        onClick: fn(),
    },
};

export const Transparent = {
    args: {
        children: "Button",
        variant: 'transparent',
        onClick: fn(),
    },
};

export const Danger = {
    args: {
        children: "Button",
        variant: 'danger',
        onClick: fn(),
    },
};

export const Icon = {
    args: {
        children: <img src={"/src/assets/person.svg"} alt="icon" />,
        variant: 'transparent',
        onClick: fn(),
    }
}