export function ServiceCard({ classes, data, ...props }) {
    const [service, setService] = useState({});
    const router = useRouter();

    const handleOnServicePress = () => {
        console.log("Service Pressed");
        router.push(`(app)/(tabs)/details/${service.service_id}`, {
            params: {
                data: JSON.stringify(service),
            },
        });
    };

    useEffect(() => {
        setService(data);
        console.clear();
        console.log(data);
    }, [data]);

    return (
        <LinearGradient
            colors={["#FFFFFF", "#F7F7F7", "#EFEFEF"]}
            className="rounded-md p-2"
            pointerEvents="auto"
            variant="elevated"
        >
            <Pressable onPress={handleOnServicePress}>
                <Image
                    className="w-full h-52 rounded-md m-0"
                    source={service.service_image || GetRandomImage()}
                    alt="random"
                    resizeMode="cover"
                />
                <Box className="p-2">
                    <Heading size="md" className="mb-1">
                        {service.service_name}
                    </Heading>
                    <Text size="sm">{service.service_city}</Text>
                    <Text size="sm">{"£" + service.service_cost}</Text>
                </Box>
            </Pressable>
            {/* </Card> */}
        </LinearGradient>
    );
}