import React from "react";
import styles from './Tabs.module.scss';
import { ReactComponent as HomeIcon } from '../../assets/icons/home.svg';
import { ReactComponent as GridIcon } from '../../assets/icons/circled.svg';
import { ReactComponent as BookIcon } from '../../assets/icons/book-sharp.svg';
import { ReactComponent as StatsIcon } from '../../assets/icons/stats-chart.svg';
import { ReactComponent as MoreIcon } from '../../assets/icons/more-vertical.svg';

import { NavLink } from "react-router-dom";

export const Tabs: React.FC = () => {
    return <section className={styles.tabs}>
        <NavLink to={'/home'} activeClassName={styles.active}>
            <HomeIcon />
        </NavLink >
        <NavLink  to={'/categories'} activeClassName={styles.active}>
            <GridIcon />
        </NavLink >
        <NavLink to={'/revise'} className={styles.utility}>
            <button>
                <BookIcon />
            </button>
        </NavLink>
        <button>
            <StatsIcon />
        </button>
        <button>
            <MoreIcon />
        </button>
    </section>
}