'use client'

import React from 'react';

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

import style from './Modal.module.scss'
import Platform from './Platform';
import Orientation from './Orientation';

interface Props {
  handleClose(): void
  labels: {
    title: string
    platform: any
    orientation: any
  }
}

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

  const { labels, handleClose } = props

  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>
        <div className={style.content}>
          <Platform handleClose={handleClose} labels={{ title: labels.platform.title }} />
          <Orientation handleClose={handleClose} labels={{ title: labels.orientation.title }} />
        </div>
      </article>
    </dialog >

  );
};

export default LangSwitcher;