import Link from '../Link';
import styles from './OpenPositionsList.module.scss';
import { Fragment } from 'react';
import { OpenPosition } from '../../models/page';
import { useRouter } from 'next/dist/client/router';

export type Props = {
  title: string;
  openPositions: OpenPosition[];
};

const OpenPositionsList = (props: Props): JSX.Element => {
  const { title, openPositions } = props;
  const router = useRouter();
  const { locale: activeLocale } = router;

  return (
    <div className={`${styles.openPositionsListContainer}`}>
      <div className={`${styles.openPositionsList}`}>
        <div className={`text_1 ${styles.title}`}>{title}</div>
        <div className={styles.links}>
          {openPositions?.map((link, id) => (
            <Fragment key={id}>
              {link?.url && (
                <Link
                  href={`${link?.languages[activeLocale || ''].url}`}
                  type={link.style?.type}
                  iconSize={link.style?.iconSize}
                  textSize={link.style?.textSize}
                  isIconFirst={link.style?.isIconFirst}
                >
                  {link?.title || ''}
                </Link>
              )}
            </Fragment>
          ))}
        </div>
      </div>
    </div>
  );
};

export default OpenPositionsList;