/** Empty / error state block with optional retry. */
import React from 'react';
import {StyleSheet, Text, View, ViewStyle} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {COLORS} from '../theme/colors';
import {SPACING} from '../theme/spacing';
import {Button} from './Button';

interface Props {
  icon?: string;
  title: string;
  message?: string;
  actionLabel?: string;
  onAction?: () => void;
  style?: ViewStyle;
}

export function EmptyState({icon = 'sparkles-outline', title, message, actionLabel, onAction, style}: Props): React.JSX.Element {
  return (
    <View style={[styles.wrap, style]}>
      <View style={styles.iconWrap}>
        <Icon name={icon} size={34} color={COLORS.purple} />
      </View>
      <Text style={styles.title}>{title}</Text>
      {message ? <Text style={styles.message}>{message}</Text> : null}
      {actionLabel && onAction ? (
        <View style={{marginTop: SPACING.l, minWidth: 160}}>
          <Button label={actionLabel} onPress={onAction} size="s" />
        </View>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {alignItems: 'center', paddingVertical: 48, paddingHorizontal: 32},
  iconWrap: {
    width: 72,
    height: 72,
    borderRadius: 24,
    backgroundColor: 'rgba(139,69,255,0.14)',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: SPACING.l,
  },
  title: {color: COLORS.white, fontSize: 16, fontWeight: '700', textAlign: 'center'},
  message: {color: COLORS.secondaryText, fontSize: 13, textAlign: 'center', marginTop: 6, lineHeight: 19},
});