import { Button } from './index.js'

export function Default() {
  return (
    <div style={{ display: 'flex', gap: 76, minWidth: 2000 }}>
      {(['fill', 'border', 'ghost'] as const).map((variant) => (
        <div
          style={{
            display: 'inline-grid',
            gap: 12,
            gridTemplateColumns: 'repeat(5, auto)',
            placeItems: 'center start',
          }}
        >
          {(['regular', 'small'] as const).map((size) =>
            (['neutral', 'red'] as const).map((color) =>
              [false, true].map((toggled) =>
                [{}, { disabled: true }, { loading: true }].map((props) =>
                  (
                    [
                      {},
                      { leadIcon: 'checkmark' },
                      { trailIcon: 'checkmark' },
                      { counter: 123 },
                      { keyHint: 'Cmd+Shift+0' },
                    ] as const
                  ).map((props2) => (
                    <Button
                      variant={variant}
                      size={size}
                      color={color}
                      toggled={toggled}
                      tooltip={`${variant} ${size} ${color} ${toggled ? 'toggled' : ''} ${props?.loading ? 'loading' : ''} ${props?.disabled ? 'disabled' : ''}`}
                      {...props}
                      {...props2}
                    >
                      Label
                    </Button>
                  )),
                ),
              ),
            ),
          )}
        </div>
      ))}
    </div>
  )
}
