import * as React from 'react';
import { IconButton } from '@mui/material';
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
import { useNavigate } from 'react-router-dom';

export default function ButtonBack(props: any) {
  const navigate = useNavigate();
  return (
    <IconButton
      sx={{
        color: '#005B7F',
        '&:hover': {
          // color: '#ffffff',
          backgroundColor: '#ffffff',
          boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
        },
        transition: 'background-color 0.3s',
        boxShadow: '0px 8px 16px rgba(145, 158, 171, 0.16)',
        mr: 5,
        mb: 7,
      }}
      size="large"
      onClick={() => (props.url ? navigate(props.url) : navigate(-1))}
    >
      <ArrowBackIosNewIcon />
    </IconButton>
  );
}