import { VscAdd } from "react-icons/vsc";
import { ReactNode } from "react";

const SideBar = () => {
  return (
    <div className="sidebar">
      <SideBarIcon tooltipText="Настройка Платы" icon={<VscAdd size={40} />} />
    </div>
  );
};

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

const SideBarIcon = ({ className, tooltipText, icon }: SideBarIconProps) => {
  return (
    <div className="sidebar-icon group">
      {icon}

      <span className="sidebar-icon-tooltip group-hover:visible">
        {tooltipText}
      </span>
    </div>
  );
};

export default SideBar;