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

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

type VideoFeedNavigationProp = StackNavigationProp<
	VideoStackParamList,
	"Video"
>;

// Define the props for VideoFeed component
interface VideoFeedProps {
	navigation: VideoFeedNavigationProp;
}
const VideoFeed: React.FC<VideoFeedProps> = ({ navigation }) => {
	return (
		<View style={styles.container}>
			<TouchableOpacity onPress={() => navigation.push("Video")}>
				<VideoCard
					playerName="Dean Machine"
					location="Family Billiards, San Francisco"
					gameType="Straight Pool"
					makePercent="34"
					medianRun="7.3"
					duration="5:03:10"
					shotPacing="0:00:26"
					imageURL={sampleVideoImage}
					videoName="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 VideoFeed;