import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { UserAccountAuthPermItemProps } from '../model/types';

export const UserAccountAuthPermItem = ({
  tid,
  menuId,
  permName
}: UserAccountAuthPermItemProps) => {
  const { navigate } = useNavigate();

  const onClickToNavigation = () => {
    navigate(PATHS.account.user.menuAuth, {
      state: {
        tid: tid,
        menuId: menuId
      }
    })
  };
  return (
    <>
      <div 
        className="perm-item"
        onClick={ () => onClickToNavigation() }
      >
        <span className="perm-name">{ permName }</span>
        <span className="ic20 arrow-right"></span>
      </div>
    </>
  );
};