'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 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>
  );
}