import React from 'react';
import { useSelector } from 'react-redux';
import { Navigate } from 'react-router-dom';

export default function ProtectedRoute({ element: Element }) {
    // ดึงสถานะการล็อกอินจาก Redux Store
    const isAuthenticated = useSelector(state => state.auth.isAuthenticated);

    if (!isAuthenticated) {
        // ถ้ายังไม่ได้ล็อกอิน ให้นำทางกลับไปที่หน้า /login
        // replace: true ป้องกันการย้อนกลับไปหน้า Dashboard ใน History
        return <Navigate to="/login" replace />;
    }

    // ถ้าล็อกอินแล้ว อนุญาตให้แสดง Element (Layout/Page)
    return Element;
}