import { Ionicons } from "@expo/vector-icons";
import type { ComponentProps } from "react";
import { Text, View } from "react-native";

type Props = {
  icon: ComponentProps<typeof Ionicons>["name"];
  title: string;
  subtitle: string;
  iconSize?: number;
};

export function EmptyState({ icon, title, subtitle, iconSize = 48 }: Props) {
  return (
    <View className="flex-1 items-center justify-center py-20">
      <Ionicons name={icon} size={iconSize} color="#d1d5db" style={{ marginBottom: 12 }} />
      <Text className="text-base font-medium text-gray-700 mb-1">{title}</Text>
      <Text className="text-sm text-gray-400 text-center px-8">{subtitle}</Text>
    </View>
  );
}
