import { View } from "react-native";

export default function ProjectCardSkeleton() {
  return (
    <View className="bg-white rounded-2xl border border-gray-200 animate-pulse overflow-hidden">
      {/* Image Section */}
      <View className="relative">
        {/* Featured ribbon placeholder */}
        <View className="absolute top-3 left-0 w-24 h-4 bg-gray-200 rotate-[-45deg] rounded-sm z-20" />

        {/* Badges Row */}
        <View className="absolute top-0 w-full p-2 flex-row items-center gap-2 z-10">
          <View className="h-6 w-20 bg-gray-200 rounded-full" />
          <View className="h-6 w-16 bg-gray-200 rounded-full" />
          <View className="h-8 w-8 bg-gray-200 rounded-full ms-auto" />
        </View>

        {/* Image Placeholder */}
        <View className="w-full h-[200px] bg-gray-100 rounded-t-2xl" />

        {/* Floating Share Badge */}
        <View className="absolute bottom-2 right-2 bg-white rounded-lg shadow-sm p-3 w-32 space-y-3">
          <View className="flex-row items-center gap-2">
            <View className="w-10 h-10 rounded-full bg-gray-200" />
            <View className="flex flex-col gap-2">
              <View className="h-4 w-16 bg-gray-200 rounded" />
              <View className="h-3 w-12 bg-gray-200 rounded" />
            </View>
          </View>
          <View className="h-3 w-full bg-gray-200 rounded border-t border-dotted border-gray-300 pt-2" />
        </View>
      </View>

      {/* Content Section */}
      <View className="p-4 gap-4">
        {/* Title */}
        <View className="h-6 w-3/4 bg-gray-200 rounded" />

        {/* Location + Investors */}
        <View className="flex-row items-center gap-6">
          <View className="h-4 w-24 bg-gray-200 rounded" />
          <View className="h-4 w-28 bg-gray-200 rounded" />
        </View>

        {/* Stats Grid */}
        <View className="flex-row justify-between gap-2">
          <View className="flex-1 p-3 rounded-lg border border-gray-300 gap-3">
            <View className="h-4 w-20 bg-gray-200 rounded mx-auto" />
            <View className="h-3 w-14 bg-gray-200 rounded mx-auto" />
          </View>

          <View className="flex-1 p-3 rounded-lg border border-gray-300 gap-3">
            <View className="h-4 w-16 bg-gray-200 rounded mx-auto" />
            <View className="h-3 w-14 bg-gray-200 rounded mx-auto" />
          </View>

          <View className="flex-1 p-3 rounded-lg border border-gray-300 gap-3">
            <View className="h-4 w-18 bg-gray-200 rounded mx-auto" />
            <View className="h-3 w-16 bg-gray-200 rounded mx-auto" />
          </View>
        </View>
      </View>
    </View>
  );
}
