import { useState } from 'react';
import { mount } from '../../shared/mount';
import { EventList, Filters, Shell } from '../../shared/components';
import { filterEvents } from '../../shared/domain';
import type { CategoryFilter } from '../../shared/domain';
import { events } from '../../shared/fixtures';

export function App() {
  const [query, setQuery] = useState('');
  const [category, setCategory] = useState<CategoryFilter>('all');
  const visible = filterEvents(events, query, category); // Calculated, not stored.
  return <Shell title="Find a community event">
    <Filters query={query} category={category} onQuery={setQuery} onCategory={setCategory} />
    <EventList events={visible} />
  </Shell>;
}
mount(<App />);