import React from 'react';
import { FiArrowLeft } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom'; // Changed from useHistory
import mapMarkerImg from '../images/map_marker.svg';

import '../styles/components/sidebar.css';

export default function Sidebar () {
    const navigate = useNavigate(); // Changed from useHistory
    
    return (
    <aside className="app-sidebar">
        <img src={mapMarkerImg} alt="Happy" />

        <footer>
        <button type="button" onClick={() => navigate(-1)}> {/* Changed from goBack */}
            <FiArrowLeft size={24} color="#FFF" />
        </button>
        </footer>
    </aside>
  )
}