import { IonButton, IonIcon, useIonRouter } from '@ionic/react';
import { arrowBack } from 'ionicons/icons';
import { LESSON_LINK, VERSIONS } from '../../constants';
import SettingSvg from './image.svg';
import { Paths } from '../../Paths';

interface ContainerProps {
  name: string;
}

const SettingContainer: React.FC<ContainerProps> = ({ name }) => {
  const router = useIonRouter();

  function handleAuthHomeClick() {
    router.push(Paths.AuthHome);
  }

  return (
    <div
      style={{
        width: '100%',
        height: '85%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <div
        style={{
          backgroundImage: `url(${SettingSvg})`,
          height: '33vh',
          width: '33vh',
          backgroundSize: 'contain',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
        }}
      ></div>
      <div>
        <p>T.B.A.</p>
      </div>
      <div>{VERSIONS}</div>
      <IonButton onClick={handleAuthHomeClick}>AuthHome</IonButton>
      <IonButton
        onClick={() => {
          router.push(LESSON_LINK, undefined, 'replace');
        }}
        style={{ marginTop: '1rem' }}
      >
        <IonIcon slot="start" icon={arrowBack}></IonIcon>
        Back
      </IonButton>
    </div>
  );
};

export default SettingContainer;