import { StackNavigationProp } from "@react-navigation/stack";
import React from "react";
import { StyleSheet, TouchableOpacity, View } from "react-native";
import sampleSessionImage from "../../assets/sample_session.png";
import SessionCard from "../../component/session-card/session-card";

// Define the types for your navigation stack
type SessionStackParamList = {
	Session: undefined; // Add other screens as needed
};

type SessionFeedNavigationProp = StackNavigationProp<
	SessionStackParamList,
	"Session"
>;

// Define the props for SessionFeed component
interface SessionFeedProps {
	navigation: SessionFeedNavigationProp;
}
const SessionFeed: React.FC<SessionFeedProps> = ({ navigation }) => {
	return (
		<View style={styles.container}>
			<TouchableOpacity onPress={() => navigation.push("Session")}>
				<SessionCard
					playerName="Dean Machine"
					location="Family Billiards, San Francisco"
					type="Straight Pool"
					makePercent="34"
					medianRun="7.3"
					duration="5:03:10"
					shotPacing="0:00:26"
					imageURL={sampleSessionImage}
					sessionName="Dusting off the chalk"
					lastPlayed="Today at 2:37pm"
					profileImageURL="https://www.pngall.com/wp-content/uploads/5/Profile-PNG-File.png"
					locationIconURL="https://www.shutterstock.com/image-vector/blank-map-marker-vector-illustration-260nw-1150566347.jpg"
				/>
			</TouchableOpacity>
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: "#f0f0f0", // Light gray background
		alignItems: "center",
	},
});

export default SessionFeed;