"use client";

import Link from "next/link";
import { styled } from "@mui/system";
import { ISidebarLink } from "@/interfaces/SidebarLink.interfaces";

const LinkContainer = styled("div")(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  padding: "12px 1px",
  borderRadius: "4px",
  color: theme.palette.text.tertiary,
  textDecoration: "none",
  transition: "background 0.2s ease-in-out",

  "&:hover": {
    color: "rgb(255, 255, 255)",
    background: "rgba(255, 255, 255, 0.08)",
    backgroundColor: theme.palette.action.hover,
    cursor: "pointer",
  },
}));

const LinkText = styled("span")(({ theme }) => ({
  color: theme.palette.text.tertiary,
  marginLeft: "12px",
  fontWeight: 500,
}));

export default function PageLinks({ title, path, icon: Icon }: ISidebarLink) {
  return (
    <Link href={path} passHref legacyBehavior>
      <a style={{ textDecoration: "none" }}>
        <LinkContainer>
          {Icon && <Icon />}
          <LinkText>{title}</LinkText>
        </LinkContainer>
      </a>
    </Link>
  );
}