import React, { useState } from 'react';
import {
  View,
  Text,
  PanResponder,
  StyleSheet
} from 'react-native';

import ThemeSwitcher from '../../../components/ThemeSwitcher';

interface EverydayProps {
  screenWidth: number;
}

const Everyday: React.FC<EverydayProps> = ({ screenWidth }) => {
  const [maskPosition, setMaskPosition] = useState({ x: 100, y: 0 });

  // Create pan responder for following touch
  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onMoveShouldSetPanResponder: () => true,
    onPanResponderMove: (event) => {
      // Only update Y position, keep X fixed
      setMaskPosition({
        x: 100, // Fixed horizontal position
        y: event.nativeEvent.pageY - 200 // Only vertical movement
      });
    },
  });

  return (
    <View style={[styles.container, { width: screenWidth }]}>
      <ThemeSwitcher />
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    position: 'relative',
  },
});

export default Everyday;