import { useColor } from "@/hooks/useColor";
import { useTranslations } from "@/providers/TranslationProviders";
import { MagnifyingGlassIcon } from "phosphor-react-native";
import { Text, View } from "react-native";

interface NoDataFoundProps {
  title?: string;
  description?: string;
  icon?: React.ReactNode;
  className?: string;
  bordered?: boolean;
  compact?: boolean;
  children?: React.ReactNode;
}

export default function NoDataFound({ title, description, icon = <MagnifyingGlassIcon size={30} color="" />, className = "", bordered = true, compact = false, children }: NoDataFoundProps) {
  const { tran } = useTranslations();
  const { primary } = useColor();

  return (
    <View className={`col-span-full ${compact ? "py-8" : "py-20"} ${bordered ? " rounded-3xl border" : ""} ${className}`}>
      <View className={`flex flex-col items-center justify-center ${compact ? "my-6" : "my-16"} px-4`}>
        {/* Icon Container with animated gradient background */}
        <View className="relative mb-6">
          <View className="absolute inset-0 bg-gray-100 rounded-full blur-2xl animate-pulse"></View>
          <View
            className="relative p-4 rounded-full  flex items-center justify-center border "
            style={{
              backgroundColor: primary[5],
              borderColor: primary[30],
            }}
          >
            {icon}
          </View>
        </View>

        {/* Title */}
        <Text className="text-2xl! font-bold! text-heading mb-3 text-center">{title || tran("No Results Found")}</Text>

        {/* Description */}
        <Text className="text-base md:text-lg text-body/70 text-center max-w-md mb-8">
          {description || tran("We couldn't find any projects matching your criteria. Try adjusting your filters or search terms.")}
        </Text>

        {/* Actions */}
        {children && <View className="mb-8">{children}</View>}

        {/* Decorative elements */}
        <View className="flex gap-2 opacity-30">
          <View className="w-2 h-2 rounded-full bg-primary"></View>
          <View className="w-2 h-2 rounded-full bg-primary"></View>
          <View className="w-2 h-2 rounded-full bg-primary"></View>
        </View>
      </View>
    </View>
  );
}
