import React from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { MotionProvider } from '@zen/skia-motion';
import { CometTail } from '@zen/skia-motion/particles';
import { HypnoticSpiral } from '@zen/skia-motion/hypnotic';
import { MagneticButton } from '@zen/skia-motion/micro';

// Demo-konsument för wayfinder-biljett #72 (karta #57): ett främmande
// Expo SDK 57-projekt som installerar @zen/skia-motion från Gitea-registret
// och ritar tre komponenter ur tre olika sub-exports.
export default function App() {
  return (
    <GestureHandlerRootView style={styles.root}>
      <MotionProvider>
        <SafeAreaView style={styles.root}>
          <ScrollView contentContainerStyle={styles.scroll}>
            <Text style={styles.title}>@zen/skia-motion demo</Text>

            <Text style={styles.label}>particles/CometTail — dra med fingret</Text>
            <View style={styles.stage}>
              <CometTail />
            </View>

            <Text style={styles.label}>hypnotic/HypnoticSpiral — håll för att strama åt</Text>
            <View style={styles.stage}>
              <HypnoticSpiral />
            </View>

            <Text style={styles.label}>micro/MagneticButton — dra knappen mot fingret</Text>
            <View style={styles.stageSmall}>
              <MagneticButton />
            </View>
          </ScrollView>
        </SafeAreaView>
      </MotionProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: '#0d0621' },
  scroll: { padding: 16, gap: 12 },
  title: { color: '#fff', fontSize: 20, fontWeight: '700', marginBottom: 8 },
  label: { color: '#cbd5e1', fontSize: 14, marginTop: 16, marginBottom: 4 },
  stage: { height: 260, borderRadius: 12, overflow: 'hidden', backgroundColor: '#000' },
  stageSmall: { height: 220, borderRadius: 12, overflow: 'hidden', backgroundColor: '#000' },
});