// import { iconButton } from "@material-tailwind/react";
import { type } from "@testing-library/user-event/dist/type";
import React from "react";
import { Link } from "react-router-dom";
import { SidebarItem } from "./SidebarItem";
import styled from "styled-components";

// import styled from "styled-components";

type SidebarLinkProps = {
  item: SidebarItem;
};

export const SidebarLink = styled(Link)`
  display: flex;
  justify-content: space-between;
  align-items: center;
  &:hover {
    background-color: green;
  }
`;

// const SidebarLink = ({ item }: SidebarLinkProps) => {
const Submenu = ({ item }: SidebarLinkProps) => {
  return (
    <>
      <SidebarLink to={item.path} className="text-white">
        <div className="select-none">{item.title}</div>
        <div>{item?.subnav ? item?.iconClosed : item?.iconOpened}</div>
      </SidebarLink>
    </>
  );
};

export default Submenu;