import {
  VscCircuitBoard,
  VscCode,
  VscSettingsGear,
  VscSourceControl,
  VscTerminal,
} from "react-icons/vsc";
import { ReactElement, ReactNode } from "react";
import ActiveLink from "../Navigation/ActiveLink";

const SideBar = () => {
  return (
    <div className="sidebar">
      <ActiveLink href="/board" activeClassName="sidebar-icon-active" shallow>
        <SideBarIcon
          tooltipText="Настройка Платы"
          icon={<VscCircuitBoard size={40} />}
        />
      </ActiveLink>
      <ActiveLink href="/flow" activeClassName="sidebar-icon-active" shallow>
        <SideBarIcon
          tooltipText="Визуальная среда"
          icon={<VscSourceControl size={40} />}
        />
      </ActiveLink>
      <ActiveLink href="/editor" activeClassName="sidebar-icon-active" shallow>
        <SideBarIcon tooltipText="Редактор кода" icon={<VscCode size={40} />} />
      </ActiveLink>

      <ActiveLink href="/console" activeClassName="sidebar-icon-active" shallow>
        <SideBarIcon tooltipText="Консоль" icon={<VscTerminal size={40} />} />
      </ActiveLink>

      <ActiveLink
        href="/settings"
        activeClassName="sidebar-icon-active"
        shallow
      >
        <SideBarIcon
          tooltipText="Настройки"
          icon={<VscSettingsGear size={40} />}
        />
      </ActiveLink>
    </div>
  );
};

type SideBarIconProps = {
  className?: string;
  tooltipText: string;
  icon: ReactElement;
};

const SideBarIcon = ({ icon, tooltipText, className }: SideBarIconProps) => {
  return (
    <div className={`sidebar-icon group ${className}`}>
      {icon}
      <span className="sidebar-tooltip group-hover:visible">{tooltipText}</span>
    </div>
  );
};

export default SideBar;