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

const Card = ({ data, handleLeftSwipe, handleRightSwipe }) => {
  const [isSwiping, setIsSwiping] = useState(false);
  const [xPos, setXPos] = useState(0);

  const handleSwipeRelease = () => {
    if (xPos < -75) {
      handleLeftSwipe(data.id);
    } else if (xPos > 75) {
      handleRightSwipe(data.id);
    } else {
      setIsSwiping(false);
      setXPos(0);
    }
  };

  const handleSwipeMove = (evt) => {
    if (!isSwiping) {
      setIsSwiping(true);
    }
    setXPos(evt.nativeEvent.translationX);
  };

  return (
    <View style={styles.card}>
      <Image source={{ uri: data.image }} style={styles.image} />
      <Text style={styles.name}>{data.name}</Text>
      <TouchableOpacity style={styles.leftButton} onPress={() => handleLeftSwipe(data.id)}>
        <Text style={styles.buttonText}>No</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.rightButton} onPress={() => handleRightSwipe(data.id)}>
        <Text style={styles.buttonText}>Yes</Text>
      </TouchableOpacity>
      <View style={[styles.swipeOverlay, { transform: [{ translateX: xPos }] }]} onTouchMove={handleSwipeMove} onTouchEnd={handleSwipeRelease} />
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '90%',
    height: 400,
    backgroundColor: '#fff',
    borderRadius: 20,
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
  },
  image: {
    width: '100%',
    height: '70%',
    resizeMode: 'cover',
  },
  name: {
    fontSize: 20,
    fontWeight: 'bold',
    marginVertical: 10,
  },
  leftButton: {
    position: 'absolute',
    top: '50%',
    left: 20,
    backgroundColor: '#f44336',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 10,
    zIndex: 1,
  },
  rightButton: {
    position: 'absolute',
    top: '50%',
    right: 20,
    backgroundColor: '#4caf50',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 10,
    zIndex: 1,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  swipeOverlay: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#fff',
    opacity: 0.5,
    zIndex: 0,
    borderRadius: 20,
  },
});

export default Card;