import React from "react";
import { View, Image, useColorScheme } from "react-native";
import { Text } from "@/components/ui/text";
import { cn } from "@/lib/utils";

interface EmptyStateProps {
  title: string;
  description?: string;
  centered?: boolean;
  className?: string;
}

export function EmptyState({
  title,
  description,
  centered = false,
  className,
}: EmptyStateProps) {
  const content = (
    <View className={cn("items-center", centered ? "py-0" : "py-4", className)}>
      <Image
        source={require("@/assets/NoDocuments.png")}
        className="w-[200px] h-[200px] mb-[-30px]"
        resizeMode="contain"
      />
      <Text className="text-foreground text-base font-sans-bold tracking-tight text-center">
        {title}
      </Text>
      {description ? (
        <Text className="text-muted-foreground text-sm text-center mt-1.5 leading-relaxed px-6">
          {description}
        </Text>
      ) : null}
    </View>
  );

  if (centered) {
    return (
      <View className="flex-1 justify-center items-center">{content}</View>
    );
  }

  return content;
}