'use client'

import React from 'react';

import { IoCloseCircleOutline } from "react-icons/io5";

import style from './LangSwitcher.module.scss'

import { useRouter } from "next/navigation";

import { LangOption } from '@/meta/settings';

interface Props {
  handleClose(): void
  labels: {
    title: string
    langs: LangOption[]
  }
}

const LangSwitcher: React.FC<Props> = (props) => {

  const { labels, handleClose } = props

  const router = useRouter();

  const setOption = (option: LangOption) => {
    router.push(`/${option.code}`);
  };

  return (
    <dialog open>
      <article className={style.container}>
        <header className={style.header}>
          <div className={style.title}>{labels.title}</div>
          <div className={style.close} onClick={() => { handleClose() }}><IoCloseCircleOutline size={24} /></div>
        </header>
        <p className={style.content}>{labels.langs.map((elem, key) =>
          <span className={style.lang} onMouseDown={(e) => {
            e.preventDefault();
            setOption(elem);
            handleClose();
          }} key={key}>{elem.label}</span>
        )}
        </p>
      </article>
    </dialog >

  );
};

export default LangSwitcher;