import React from 'react';
import { Navbar, Button } from "react-bootstrap";
import PropTypes from 'prop-types';

import GasTypes from "./GasTypes";

const Footer = (props) => {
  const {
    selectGasType,
    selectedGasType,
    setNeedUpdateUserLocation,
  } = props;

  return (
    <Navbar bg="light" variant="light" fixed="bottom">
      <GasTypes selectedGasType={selectedGasType} selectGasType={selectGasType} />
      <Button
        variant="link"
        onClick={() => setNeedUpdateUserLocation(true)}
        onFocus={() => { }}
        onBlur={() => { }}
      >
        <img src="/gps.png" alt="Géolocalisez moi" />
      </Button>
    </Navbar>
  );
};

Footer.propTypes = {
  selectedGasType: PropTypes.string.isRequired,
  selectGasType: PropTypes.func.isRequired,
  setNeedUpdateUserLocation: PropTypes.func.isRequired,
};

export default Footer;