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

import { IconButton } from '.';
import { Card } from '../card';
import { Icon } from '../iconography';

const meta: Meta<typeof IconButton> = {
  title: 'Components/IconButton',
  component: IconButton,
  argTypes: {},
};

export default meta;
type Story = StoryObj<typeof IconButton>;

const sizes = ['xxs', 'xs', 'sm', 'md', 'lg'] as const;

export const AllButton: Story = {
  name: 'All Buttons',
  render: () => {
    return (
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(5, minmax(0, 1fr))',
          gap: '1.5rem',
          justifyItems: 'center',
        }}
      >
        {sizes.map(size => (
          <Card style={{ display: 'flex', alignItems: 'center' }}>
            <IconButton size={size}>
              <Icon.Cancel width={16} height={16} />
            </IconButton>
          </Card>
        ))}
      </div>
    );
  },
};

export const Default: Story = {
  args: {
    children: <Icon.Cancel width={16} height={16} />,
  },
};

export const Elevate: Story = {
  args: {
    children: <Icon.Add width={16} height={16} />,
    variant: 'elevate',
  },
};
