import { ActivityIndicator, FlatList, Image, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

import { RideCard } from "@/components/ride-card";
import { images } from "@/constants";
import { useFetch } from "@/lib/fetch";
import { useT } from "@/lib/i18n";
import { useTheme } from "@/lib/theme";
import type { Ride } from "@/types/type";

const Rides = () => {
  const { data: recentRides, loading } = useFetch<Ride[]>("/(api)/ride/list");
  const { isDark } = useTheme();
  const t = useT();

  return (
    <SafeAreaView className="bg-general-500 dark:bg-neutral-950">
      <FlatList
        data={recentRides}
        renderItem={({ item }) => <RideCard ride={item} />}
        className="px-5"
        keyboardShouldPersistTaps="handled"
        contentContainerStyle={{
          paddingBottom: 100,
        }}
        ListEmptyComponent={
          <View className="flex flex-col items-center justify-center">
            {!loading ? (
              <>
                <Image
                  source={images.noResult}
                  alt={t("rides.noRecentAlt")}
                  className="w-40 h-40"
                  resizeMode="contain"
                />
                <Text className="text-sm text-black dark:text-white">
                  {t("rides.noRecent")}
                </Text>
              </>
            ) : (
              <ActivityIndicator size="small" color={isDark ? "#fff" : "#000"} />
            )}
          </View>
        }
        ListHeaderComponent={
          <Text className="text-2xl font-JakartaBold my-5 text-black dark:text-white">
            {t("rides.allRides")}
          </Text>
        }
      />
    </SafeAreaView>
  );
};

export default Rides;