import React from 'react';
import { NavLink } from 'react-router-dom';

interface LableProps {
  icon: React.ReactNode;
  pageName: string;
  to: string;
}

const Lable: React.FC<LableProps> = ({ icon, pageName, to }) => {
  return (
    <NavLink
      to={to}
      className={({ isActive }) => `w-[208px] flex items-center p-2 cursor-pointer rounded-sm group select-none border-l-4 ${
        isActive ? 'bg-amber-100 border-amber-500 text-amber-500' : 'bg-transparent border-transparent text-gray-700'
      }`}
    >
      <div className="mr-2 group-hover:text-amber-500">{icon}</div>
      <div className="text-lg font-medium group-hover:text-amber-500">{pageName}</div>
    </NavLink>
  );
}

export default Lable;