import React from 'react'

import styles from './_left-nav-active-bar.module.scss'
import { type LeftNavProps } from '../LeftNav'

type LeftNavActiveBarProps = {
  activeBarTopPos: number
  environment?: LeftNavProps['environment']
}

export const envColorMap = {
  development: 'yellow',
  staging: 'red',
  demo: 'blue',
  production: 'purple',
}

const LeftNavActiveBar = ({
  activeBarTopPos = 0,
  environment = 'production',
}: LeftNavActiveBarProps): React.JSX.Element => {
  const envColor = envColorMap[environment]
  const envClass = styles[envColor]

  return (
    <div className={styles.container}>
      <div className={`${styles.background} ${envClass}`} />
      <div
        className={`${styles.activeBar} ${envClass}`}
        style={{ top: activeBarTopPos }}
      />
    </div>
  )
}

export default LeftNavActiveBar