import { h } from 'preact';
import { Button } from '../ui/Button';
import { Screen } from '../ui/Layout';
import GameList from '../GameList';
import type { Game, GameFilter } from '../../types/game';

interface GameListScreenProps {
  games: Game[];
  filter: GameFilter;
  onFilterChange: (filter: GameFilter) => void;
  onShowGameDetail: (gameId: number) => void;
  onDeleteGame: (gameId: number) => void;
  onShowNewGame: () => void;
}

export default function GameListScreen({
  games,
  filter,
  onFilterChange,
  onShowGameDetail,
  onDeleteGame,
  onShowNewGame,
}: GameListScreenProps) {
  return (
    <Screen>
      <Button
        variant="primary"
        size="large"
        onClick={onShowNewGame}
        aria-label="Neues Spiel starten"
        style={{ width: '100%', marginBottom: '24px' }}
      >
        + Neues Spiel
      </Button>
      
      <GameList
        games={games}
        filter={filter}
        onShowGameDetail={onShowGameDetail}
        onDeleteGame={onDeleteGame}
        setFilter={onFilterChange}
      />
    </Screen>
  );
}