import { useParams } from '@tanstack/react-router';
import { useCharacter } from './hooks';
import { CharacterSheet } from './CharacterSheet';
import { Page, EmptyState } from '@/components/ui/Page';

export function CharacterSheetPage() {
  const { characterId } = useParams({ from: '/characters/$characterId' });
  const character = useCharacter(characterId);

  if (character === undefined) {
    // useLiveQuery returns undefined while loading AND when not found.
    return (
      <Page>
        <EmptyState title="Loading character…" />
      </Page>
    );
  }
  // Keyed so local sheet state resets cleanly when switching characters.
  return <CharacterSheet key={character.id} character={character} />;
}
