import { View, Text, StyleSheet, Pressable } from 'react-native';

interface EnvironmentCardProps {
  name: string;
  publicUrl: string;
  status: number;
  url: string;
  id: number;
  onPress: () => void;
}

export default function EnvironmentCard({ name, publicUrl, status, url, id, onPress }: EnvironmentCardProps) {
  return (
    <Pressable onPress={onPress}>
      <View style={styles.card}>
        <Text style={styles.title}>{name}</Text>
        {publicUrl && <Text>Public URL: {publicUrl}</Text>}
        {status === 1 && <Text>Status: Running</Text>}
        {status === 2 && <Text>Status: Stopped</Text>}
        {status === 3 && <Text>Status: Pending</Text>}
        <Text>URL: {url}</Text>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8,
  },
});