'use client';

import { GameRulesInfo } from '@/components/game-rules-info';
import { useTranslation } from '@/lib/i18n/context';

interface TutorialOverlayProps {
  visible: boolean;
  onClose: () => void;
}

// i18n-Schritt 8: Titel + Button jetzt ueber t.tutorial.* uebersetzt.
export function TutorialOverlay({ visible, onClose }: TutorialOverlayProps) {
  const { t } = useTranslation();
  if (!visible) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4 safe-top safe-bottom">
      <div className="bg-neutral-900 rounded-2xl p-6 max-w-sm w-full max-h-[85vh] flex flex-col border border-white/10">
        <h2 className="text-xl font-bold text-yumder-pink mb-4 shrink-0">{t.tutorial.welcomeTitle}</h2>
        <div className="flex-1 overflow-y-auto -mr-2 pr-2">
          <GameRulesInfo />
        </div>
        <button
          onClick={onClose}
          className="w-full bg-yumder-pink font-semibold rounded-lg px-4 py-3 mt-4 shrink-0"
        >
          {t.tutorial.startButton}
        </button>
      </div>
    </div>
  );
}