import { Navigate, Outlet, useLocation } from 'react-router-dom';
import { useAuthStore } from '../store/authStore';

interface ProtectedRouteProps {
  allowedRoles?: ('user' | 'admin')[];
}

export const ProtectedRoute = ({ allowedRoles = ['user', 'admin'] }: ProtectedRouteProps) => {
  const { user, profile } = useAuthStore();
  const location = useLocation();

  if (!user) {
    // Redirect to login but save the attempted url
    return <Navigate to="/auth" state={{ from: location }} replace />;
  }

  if (profile && !allowedRoles.includes(profile.role)) {
    // Role not authorized, go to dashboard
    return <Navigate to="/dashboard" replace />;
  }

  return <Outlet />;
};