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

type Props = {
  icon: ComponentProps<typeof Ionicons>['name'];
  title: string;
  subtitle?: string;
  children?: React.ReactNode;
};

export function EmptyState({ icon, title, subtitle, children }: Props) {
  return (
    <View className="flex-1 items-center justify-center py-16 px-6">
      <View className="w-16 h-16 rounded-full bg-neutral-100 border border-neutral-200 items-center justify-center mb-4">
        <Ionicons name={icon} size={28} color="#a3a3a3" />
      </View>
      <Text className="text-neutral-900 text-base text-center mb-2" style={{ fontFamily: 'Nunito_600SemiBold' }}>{title}</Text>
      {subtitle ? (
        <Text className="text-neutral-500 text-sm text-center leading-5" style={{ fontFamily: 'Nunito_400Regular' }}>{subtitle}</Text>
      ) : null}
      {children ? <View className="mt-5 w-full">{children}</View> : null}
    </View>
  );
}