// Bottom-Sheet mit 4 Mini-Spielen zur Ablenkung im SOS-Flow.
import { useEffect, useRef } from 'react';
import { View, Text, Pressable, Animated, StyleSheet } from 'react-native';
import { type GameType, GamePickerGrid } from './UrgeGames';

type Props = { onSelect: (game: GameType) => void; onClose: () => void };

export default function GamePickerDrawer({ onSelect, onClose }: Props) {
  const slideAnim = useRef(new Animated.Value(500)).current;
  useEffect(() => {
    Animated.spring(slideAnim, { toValue: 0, useNativeDriver: true, damping: 22, mass: 1, stiffness: 200 }).start();
  }, []);
  return (
    <>
      <Pressable style={st.backdrop} onPress={onClose} />
      <Animated.View style={[st.drawerContainer, { transform: [{ translateY: slideAnim }] }]}>
        <View style={st.drawerHandle} />
        <View style={{ paddingHorizontal: 20, paddingTop: 12, paddingBottom: 8 }}>
          <Text style={{ fontFamily: 'Nunito_800ExtraBold', fontSize: 20, color: '#111827', textAlign: 'center' }}>
            Wähl ein Spiel
          </Text>
          <Text style={{ fontFamily: 'Nunito_400Regular', fontSize: 13, color: '#6b7280', textAlign: 'center', marginTop: 4 }}>
            Lenk deinen Kopf ab — nur ein paar Minuten
          </Text>
        </View>
        <View style={{ paddingHorizontal: 16, paddingTop: 8 }}>
          <GamePickerGrid onSelect={onSelect} />
        </View>
      </Animated.View>
    </>
  );
}

const st = StyleSheet.create({
  backdrop: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.28)', zIndex: 20 },
  drawerContainer: { position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 21, backgroundColor: '#ffffff', borderTopLeftRadius: 28, borderTopRightRadius: 28, paddingBottom: 36, shadowColor: '#000', shadowOffset: { width: 0, height: -4 }, shadowOpacity: 0.18, shadowRadius: 20, elevation: 24 },
  drawerHandle: { width: 40, height: 4, borderRadius: 2, backgroundColor: '#d1d5db', alignSelf: 'center', marginTop: 14, marginBottom: 4 },
});