import { View } from 'react-native';
import { Text } from '~/components/Text';

type EmptyStateProps = {
  icon: string;
  title: string;
  description: string;
  padding?: number;
};

export function EmptyState({
  icon,
  title,
  description,
  padding = 32
}: EmptyStateProps) {
  return (
    <View style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding,
    }}>
      <Text style={{ fontSize: 60, marginBottom: 16 }}>{icon}</Text>
      <Text variant="h3" color="primary" align="center" style={{ marginBottom: 8 }}>
        {title}
      </Text>
      <Text variant="body" color="secondary" align="center">
        {description}
      </Text>
    </View>
  );
}