'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 16px',
//   borderRadius: theme.shape.borderRadius,
//   color: theme.palette.text.primary,
  textDecoration: 'none',
  transition: 'background 0.2s ease-in-out',

  '&:hover': {
    backgroundColor: 'yellow',
    // backgroundColor: theme.palette.action.hover,
    cursor: 'pointer',
  },
}));

const LinkText = styled('span')({
  marginLeft: '12px',
  fontWeight: 500,
});

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