import { useState, useEffect, useCallback } from 'react';
import { Persona, PersonaConfig } from '../types';
import { getTheme } from '../styles/theme';
const STORAGE_KEY = 'persona';
export function usePersona() {
const [persona, setPersona] = useState<Persona>(() => {
const stored = localStorage.getItem(STORAGE_KEY);
return (stored === 'arthur' || stored === 'oracle') ? stored : 'oracle';
});
const config: PersonaConfig = getTheme(persona);
// Persist to localStorage
useEffect(() => {
localStorage.setItem(STORAGE_KEY, persona);
}, [persona]);
// Update CSS custom properties
useEffect(() => {
document.documentElement.style.setProperty('--accent-color', config.accentColor);
document.documentElement.style.setProperty('--accent-hover', config.accentHover);
}, [config]);
const toggle = useCallback(() => {
setPersona(prev => prev === 'oracle' ? 'arthur' : 'oracle');
}, []);
return {
persona,
config,
toggle,
isOracle: persona === 'oracle',
isArthur: persona === 'arthur',
};
}
