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

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

const styles = {
    navBar: {
        backgroundColor: 'var(--bs-success)',
        height: 56,
        width: '100%',
    } as CSSProperties,
    navBarGroup: {
        display: 'flex',
        flexDirection: 'row',
        height: '100%',
        margin: 'auto',
    } as CSSProperties,
    navBarElement: {
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    } as CSSProperties,
}

type BottomNavBarProps = {
    width: number,
    toggleFilters: (state: boolean) => void,
}

function BottomNavBar({ width, toggleFilters }: BottomNavBarProps) {
    return (
        <div style={styles.navBar}>
            <div style={{ ...styles.navBarGroup, width: width }}>

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

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

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

            </div>
        </div>
    )
}

export default BottomNavBar