import { NAVIGATION_ACTION_SCALES, NAVIGATION_ACTION_VARIANTS } from '@engie-group/fluid-types';
import { NJNavigationAction, NJNavigationActionProps } from '../NJNavigationAction';

export const All = (props: NJNavigationActionProps) => (
  <div
    style={{
      display: 'flex',
      gap: 'var(--nj-semantic-size-spacing-8)',
      flexWrap: 'wrap',
      flexDirection: 'column'
    }}
  >
    {[undefined, ...NAVIGATION_ACTION_VARIANTS].map((variant) => (
      <div
        key={variant ?? 'default'}
        style={{
          display: 'flex',
          alignItems: 'flex-start',
          backgroundColor:
            variant === 'inverse'
              ? 'var(--nj-semantic-color-background-neutral-spotlight-default)'
              : undefined,
          padding: variant === 'inverse' ? 'var(--nj-semantic-size-spacing-4)' : undefined
        }}
      >
        {[undefined, ...NAVIGATION_ACTION_SCALES].map((scale) => (
          <NJNavigationAction
            key={`${variant}-${scale}`}
            {...props}
            scale={scale}
            variant={variant}
          >
            {`${variant ?? 'default'} | ${scale ?? 'default'}`}
          </NJNavigationAction>
        ))}
      </div>
    ))}
  </div>
);