import { Link } from 'react-router-dom'

import addIcon from '../assets/addIcon.svg'
import filterIcon from '../assets/filterIcon.svg'
import userIcon from '../assets/userIcon.svg'

const navBarStyles = {
    backgroundColor: 'var(--bs-success)',
    height: 56,
    width: "100%",
}

const navBarGroupStyles = {
    display: "flex",
    flexDirection: "row",
    height: "100%",
    margin: "auto"
}

const navBarElementStyles = {
    width: "100%",
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
}

function BottomNavBar({ width, toggleFilters }) {
    return (
        <div style={navBarStyles}>
            <div style={{ ...navBarGroupStyles, width: width }}>

                <a style={navBarElementStyles} onClick={() => toggleFilters(true)}>
                    <img src={filterIcon} alt="Фильтровать объявления" title='Фильтровать объявления' />
                </a>

                <Link style={navBarElementStyles} to="/add" >
                    <img src={addIcon} alt="Опубликовать объявление" title='Опубликовать объявление' />
                </Link>

                <Link style={navBarElementStyles} to={"/user"} >
                    <img src={userIcon} alt="Личный кабинет" title='Личный кабинет' />
                </Link>

            </div>
        </div>
    )
}

export default BottomNavBar