import { Meta, StoryObj } from '@storybook/react-webpack5';
import Circle from './Circle';
import { Person } from '@transferwise/icons';
import { CircleProps } from '.';
import Body from '../../body';
import { withVariantConfig } from '../../../.storybook/helpers';

export default {
  title: 'Internal/Circle',
  component: Circle,
  tags: ['!manifest'],
} satisfies Meta<typeof Circle>;

type Story = StoryObj<typeof Circle>;

export const Basic: Story = {
  args: {
    children: 'NP',
    size: 40,
    as: 'div',
    className: 'bg-neutral',
  },
  render: (args) => {
    return <Circle {...args} />;
  },
};

export const Sizes: Story = {
  render: () => {
    const content = <Person size={16} />;
    const sizes: CircleProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
        }}
      >
        {sizes.map((size) => (
          <Circle key={size} size={size} className="bg-neutral">
            {content}
          </Circle>
        ))}
      </div>
    );
  },
  ...withVariantConfig(['light', 'dark']),
};

export const FixedSize: Story = {
  render: () => {
    const size = 72;
    const content = <Person size={16} />;
    return (
      <div
        style={{
          gap: '1em',
          display: 'grid',
          justifyContent: 'space-between',
          gridTemplate: 'auto auto / repeat(2, 180px)',
        }}
      >
        <Body className="d-block">
          Dynamic Size (<code>--size-{size}</code>)
        </Body>
        <Body className="d-block">
          Fixed Size (<code>{size}px</code>)
        </Body>
        <Circle size={72} fixedSize={false} className="bg-neutral">
          {content}
        </Circle>
        <Circle size={72} fixedSize className="bg-neutral">
          {content}
        </Circle>
      </div>
    );
  },
  ...withVariantConfig(['400%']),
};
