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

export const UserManageAuthItem = ({
  useYn,
  authName,
  tid
}: UserManageAuthItemProps) => {
  const { navigate } = useNavigate();

  const onClickToNavigation = () => {
    navigate(PATHS.account.user.loginAuthInfo, {
      state: {
        tid: tid
      }
    });
  };
  return (
    <>
      <div 
        className="auth-item"
        onClick={ () => onClickToNavigation() }
      >
        <div className="auth-item-left">
          <span className={ `tag-pill ${(!!useYn)? '': 'red'}` }>{ (!!useYn)? '사용': '미사용' }</span>
          <span className="auth-name">{ authName }</span>
        </div>
        <span className="ic20 arrow-right"></span>
      </div>
    </>
  );
};