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

const SideBar = () => {
  return (
    <div className="sidebar">
      <SideBarIcon
        tooltipText="Настройка Платы"
        icon={<VscCircuitBoard size={40} />}
      />
      <SideBarIcon
        tooltipText="No Code"
        icon={<VscSourceControl size={40} />}
      />
      <SideBarIcon
        tooltipText="Advence"
        icon={<VscCode size={40} />}
      />
      <SideBarIcon
        tooltipText="Terminal"
        icon={<VscTerminal size={40} />}
      />
      <SideBarIcon
        tooltipText="Setting"
        icon={<VscSettingsGear size={40} />}
      />
    </div>
  );
};

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

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

export default SideBar;
