import React from 'react';
import { XerticaAssistant } from 'xertica-ui/assistant';
import { useLayout } from 'xertica-ui/hooks';
import { AppLayout } from '../app/components/AppLayout';
import { SettingsContent } from '../features/settings';
import { useFdmAssistant } from '../features/assistant';

/**
 * Settings page — thin layout shell.
 *
 * Auth state is consumed from `AuthContext` via `AppLayout` — no props needed.
 */
export function SettingsPage() {
  const { assistenteExpanded, toggleAssistente } = useLayout();
  const { assistantProps } = useFdmAssistant();

  return (
    <AppLayout
      assistant={
        <XerticaAssistant
          {...assistantProps}
          isExpanded={assistenteExpanded}
          onToggle={toggleAssistente}
          onEvaluation={(id, type, reason) => console.log('Feedback:', id, type, reason)}
        />
      }
    >
      <SettingsContent />
    </AppLayout>
  );
}