import { NAVIGATION_TAB_VARIANTS } from '@engie-group/fluid-types';
import { NJNavigationTab, NJNavigationTabProps } from '../NJNavigationTab';

export const All = (props: NJNavigationTabProps) => (
  <div
    style={{
      display: 'flex',
      gap: 'var(--nj-semantic-size-spacing-8)',
      flexWrap: 'wrap',
      flexDirection: 'column'
    }}
  >
    <div
      className="nj-tabs"
      style={{
        alignItems: 'flex-start'
      }}
    >
      {[undefined, ...NAVIGATION_TAB_VARIANTS].map((variant) => (
        <>
          {variant !== 'inverse' ? (
            <NJNavigationTab key={`${variant}`} {...props} variant={variant}>
              {`${variant ?? 'default'}`}
            </NJNavigationTab>
          ) : null}
        </>
      ))}
    </div>
    <div
      className="nj-tabs"
      style={{
        backgroundColor: 'var(--nj-semantic-color-background-neutral-spotlight-default)'
      }}
    >
      <NJNavigationTab {...props} variant="inverse">
        Inverse
      </NJNavigationTab>
    </div>
  </div>
);