import type { PersonalityDirectoryPage } from '@/business/personality/types';
import { PersonalityDirectoryFilters } from '@/components/personality-directory/PersonalityDirectoryFilters';
import { PersonalityDirectoryHeader } from '@/components/personality-directory/PersonalityDirectoryHeader';
import { PersonalityTypeList } from '@/components/personality-directory/PersonalityTypeList';

interface PersonalityDirectoryViewProps {
  readonly page: PersonalityDirectoryPage;
  readonly onBackToQuiz: () => void;
  readonly highlightType?: string | null;
}

export function PersonalityDirectoryView({
  page,
  onBackToQuiz,
  highlightType,
}: PersonalityDirectoryViewProps) {
  return (
    <div className="space-y-5">
      <PersonalityDirectoryHeader
        description={page.groupDescription}
        onBackToQuiz={onBackToQuiz}
      />
      <PersonalityDirectoryFilters
        searchQuery={page.searchQuery}
        filterGroup={page.filterGroup}
        onSearchChange={page.setSearchQuery}
        onFilterGroupChange={page.setFilterGroup}
      />
      <div className="text-xs text-slate-500">
        Showing {page.filteredTypes.length} of {page.personalityTypes.length} types
      </div>
      <PersonalityTypeList page={page} highlightType={highlightType} />
    </div>
  );
}
