import { Component, createEffect, createSignal } from 'solid-js';
import { IconButton } from '@suid/material';

import ArrowBackIcon from '@suid/icons-material/ArrowBack';
import ArrowForwardIcon from '@suid/icons-material/ArrowForward';
import styles from './BackForward.module.css';

export const Back: Component = () => {
  const onClickHandler = (event: any) => {
    window.history.back();
  };

  return (
    <IconButton onClick={onClickHandler} class={styles.back}>
      <ArrowBackIcon />
    </IconButton>
  );
};

export const Forward: Component = () => {
  const onClickHandler = (event: any) => {
    window.history.forward();
  };

  return (
    <IconButton onClick={onClickHandler} class={styles.forward}>
      <ArrowForwardIcon />
    </IconButton>
  );
};