import { Meta, StoryObj } from '@storybook/react';

import { Button, IconClose, IconCopy, IconPlay, IconPlus } from '@/components';

const meta: Meta<typeof Button> = {
  component: Button,
};

export default meta;

type TStory = StoryObj<typeof Button>;

export const Primary: TStory = {
  args: {
    shape: 'default',
    size: 'md',
    color: 'black',
    disabled: false,
    onClick: () => {},
    children: <div className="relative flex items-center gap-2 text-sm">Button</div>,
  },
};

export const Red: TStory = {
  args: {
    shape: 'default',
    size: 'md',
    color: 'red',
    disabled: false,
    onClick: () => {},
    children: <div className="relative flex items-center text-sm">Button</div>,
  },
};

export const Icon: TStory = {
  args: {
    shape: 'square',
    size: 'md',
    color: 'transparent',
    disabled: false,
    onClick: () => {},
    children: (
      <div className="relative text-center text-sm">
        <IconClose />
      </div>
    ),
  },
};

export const IconLeft: TStory = {
  args: {
    shape: 'default',
    size: 'md',
    color: 'black',
    disabled: false,
    onClick: () => {},
    children: (
      <div className="relative flex items-center gap-2 text-sm">
        <IconPlus className="w-4 h-4 shrink-0" />
        This is button with icon on the left side
      </div>
    ),
  },
};

export const IconRight: TStory = {
  args: {
    shape: 'default',
    size: 'md',
    color: 'blackOutlined',
    disabled: false,
    onClick: () => {},
    children: (
      <div className="relative flex items-center gap-2 text-sm">
        This is button with icon on the left side
        <IconCopy className="w-4 h-4 shrink-0" />
      </div>
    ),
  },
};

export const Circle: TStory = {
  args: {
    shape: 'circle',
    size: 'sm',
    color: 'black',
    disabled: false,
    onClick: () => {},
    children: (
      <div className="relative text-center">
        <IconPlay />
      </div>
    ),
  },
};