import { Navigate, useLocation } from 'react-router-dom';
import type { ReactNode } from 'react';
import { useAuthStore } from '@/features/auth/authStore';
import { useI18n } from '@/i18n/i18n';

export function ProtectedRoute({ children }: { children: ReactNode }) {
  const { user, status } = useAuthStore();
  const location = useLocation();
  const { t } = useI18n();
  if (status !== 'ready') {
    return (
      <div className="flex min-h-[50vh] items-center justify-center text-muted">
        {t('protected.loading')}
      </div>
    );
  }
  if (!user) {
    return <Navigate to="/login" replace state={{ from: location }} />;
  }
  return <>{children}</>;
}