import { useGetQuery } from "@/hooks/mutate/useGetQuery";
import { useColor } from "@/hooks/useColor";
import { router } from "expo-router";
import { FlatList, Pressable, Text, useWindowDimensions, View } from "react-native";
import ProjectCard from "../cards/ProjectCard";
import ProjectCardSkeleton from "../cards/ProjectCardSkeleton";

export default function FeatureSections() {
  const { width: SCREEN_WIDTH } = useWindowDimensions();
  const { primary } = useColor();

  const { data: featuredData, isLoading } = useGetQuery({
    url: "/projects",
    params: {
      featured: true,
      per_page: 8,
      orderby: "created_at-desc",
    },
  });

  const renderContent = () => {
    if (isLoading) {
      return (
        <FlatList
          data={[1, 2, 3]}
          keyExtractor={(i) => `skeleton-${i}`}
          horizontal
          showsHorizontalScrollIndicator={false}
          renderItem={() => (
            <View style={{ width: SCREEN_WIDTH * 0.8, marginRight: 16 }}>
              <ProjectCardSkeleton />
            </View>
          )}
        />
      );
    }

    return (
      <FlatList
        data={featuredData?.data || []}
        keyExtractor={(item) => `featured-${item.id}`}
        horizontal
        showsHorizontalScrollIndicator={false}
        renderItem={({ item }) => (
          <Pressable
            style={{
              width: SCREEN_WIDTH * 0.8,
              marginRight: 16,
            }}
          >
            <ProjectCard project={item} />
          </Pressable>
        )}
      />
    );
  };

  return (
    <View className="pt-6">
      <View className="flex-row justify-between items-center pb-6">
        <Text className="text-2xl font-manrope-semibold">Featured Projects</Text>
        <Pressable onPress={() => router.push("/projects")} className="font-manrope-semibold pr-4">
          <Text style={{ color: primary.base }}>See All</Text>
        </Pressable>
      </View>
      <View>{renderContent()}</View>
    </View>
  );
}
