import { mount } from '../../shared/mount';
import { Shell } from '../../shared/components';

type EventSummary = { id: string; title: string; places: number };
const summaries: EventSummary[] = [
  { id: 'garden-morning', title: 'Garden morning', places: 7 },
  { id: 'repair-cafe', title: 'Repair café', places: 0 },
];
type SummaryCardProps = { title: string; places: number };
function SummaryCard({ title, places }: SummaryCardProps) {
  return <article className="event-card"><h2>{title}</h2>
    <p>{places === 0 ? 'Currently full' : `${places} fictional places`}</p></article>;
}
function App() {
  return <Shell title="Cards from props"><div className="event-grid">
    {summaries.map(event => <SummaryCard key={event.id} title={event.title} places={event.places} />)}
  </div></Shell>;
}
mount(<App />);