import css from '../../templates/Page/index.module.css';
import GridContainer from '../../grid/GridContainer';
import GridVoid from '../../grid/GridVoid';
import GridColumn from '../../grid/GridColumn';
import ArrowSVG from '../../assets/icons/icon-arrow-left.svg';
import React, { FC } from 'react';

export interface BackToProps {
  handleClick: () => void;
  name: string;
  show: boolean;
}
export const BackToPage: FC<BackToProps> = ({ handleClick, name }) => {
  return (
    <div className={css.back__wrapper}>
      <div className={css.back}>
        <GridContainer>
          <GridVoid>
            <GridColumn
              columns={['sm-12', 'lg-10', 'xl-8', 'xxl-6']}
              offset={['lg-1', 'xl-2', 'xxl-3']}
            >
              <div
                className={`link ${css.backLink}`}
                onClick={handleClick}
                style={{ display: 'flex' }}
              >
                <ArrowSVG className={css.arrow__svg} />

                <span>{name}</span>
              </div>
            </GridColumn>
          </GridVoid>
        </GridContainer>
      </div>
    </div>
  );
};

export default BackToPage;