export default function ModeSelectPage({ onSelect }) {
  return (
    <div className="h-screen flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-900 px-4">
      <div className="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-6 rounded shadow-md w-full max-w-md text-center">
        <h1 className="text-2xl font-bold mb-4">Wähle deinen Modus</h1>
        <p className="mb-6 text-gray-700 dark:text-gray-300">D- oder C-Lizenz?</p>
        <div className="flex flex-col gap-4 sm:flex-row justify-center">
          <button
            onClick={() => onSelect("d")}
            className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-6 rounded transition"
          >
            D-Lizenz
          </button>
          <button
            onClick={() => onSelect("c")}
            className="bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded transition"
          >
            C-Lizenz
          </button>
        </div>
      </div>
    </div>
  );
}
