import styles from './LanguageOptions.module.scss';
import cx from '../utils/classname.js';
import type { CSSVariables } from '../utils/types.js';
import type { LanguageOptionsProps } from './types.js';
import List, { ListItem } from '../List/index.js';
import Link from '../Link/index.js';

const LanguageOptions = ({
  translations,
  menuBackgroundColor,
  menuBackgroundColorHover,
  color,
  colorHover,
}: LanguageOptionsProps) => {
  if (!translations || translations.length <= 1) {
    return null;
  }

  const cssVariables: CSSVariables = {
    ...(color?.rgba && {
      '--hscl-languageSwitcher-color': color.rgba,
    }),
    ...(menuBackgroundColor?.rgba && {
      '--hscl-languageSwitcher-backgroundColor': menuBackgroundColor.rgba,
    }),
    ...(menuBackgroundColorHover?.rgba && {
      '--hscl-languageSwitcher-backgroundColor-hover':
        menuBackgroundColorHover.rgba,
    }),
    ...(colorHover?.rgba && {
      '--hscl-languageSwitcher-color-hover': colorHover.rgba,
    }),
  };

  return (
    <List
      style={cssVariables}
      role="menu"
      className={styles.languageList}
      gap="0px"
      showMarker={false}
    >
      {translations.map(translation => (
        <ListItem
          key={translation.languageCode}
          role="menuitem"
          className={cx(styles.languageItem, {
            [styles['languageItem--active']]: translation.isActive,
          })}
        >
          <Link
            href={translation.localizedUrl}
            lang={translation.languageCode}
            // hrefLang={translation.languageCode} // this was in the Elevate implementation, so leaving here for now
            className={styles.languageLink}
          >
            {translation.languageDisplayName.LOCALIZED}
          </Link>
        </ListItem>
      ))}
    </List>
  );
};

export default LanguageOptions;
