import type { FC } from 'react';

import ArrowBackOutlinedIcon from '@material-hu/icons/material/ArrowBackOutlined';
import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { useTranslation } from 'src/pages/dashboard/scorm/i18n';

export type GoBackButtonProps = {
  onClick: () => void;
};

const GoBackButton: FC<GoBackButtonProps> = props => {
  const { onClick } = props;
  const { t } = useTranslation();

  return (
    <Button
      onClick={onClick}
      variant="outlined"
      color="primary"
      sx={{
        width: 'fit-content',
        py: 0.5,
        px: 2,
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          gap: 1,
        }}
      >
        <ArrowBackOutlinedIcon />
        {t('GO_BACK')}
      </Stack>
    </Button>
  );
};

export default GoBackButton;