import React from "react";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
/**
 * Represents a protected route component.
 * @param {object} props - The component's props.
 * @param {React.ComponentType} props.Component - The component to render if the user is authenticated.
 * @returns {JSX.Element} The protected route component.
 */
const Protected = (prop) => {
  const { Component } = prop;
  const navigate = useNavigate();
  const isLogin = localStorage.getItem("token");
  /**
   * Use effect to check if the user is authenticated.
   */
  useEffect(() => {
    if (!isLogin) {
      navigate("/login");
    }
  }, [isLogin, navigate]);
  return <div>{isLogin ? <Component /> : null}</div>;
};

export default Protected;