import { Text, View, StyleSheet } from 'react-native';
import { color, spacing, typography } from '../theme';

type Tone = 'loading' | 'empty' | 'error' | 'offline' | 'denied';

interface Props {
  tone: Tone;
  title: string;
  body?: string;
}

const TONE_COLOR: Record<Tone, string> = {
  loading: color.ink[500],
  empty: color.ink[500],
  error: color.danger,
  offline: color.warning,
  denied: color.danger,
};

export function StateView({ tone, title, body }: Props) {
  return (
    <View style={styles.box}>
      <View style={[styles.dot, { backgroundColor: TONE_COLOR[tone] }]} />
      <Text style={styles.title}>{title}</Text>
      {body ? <Text style={styles.body}>{body}</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  box: { padding: spacing[6], alignItems: 'center', gap: spacing[3] },
  dot: { width: 8, height: 8, borderRadius: 999 },
  title: { fontSize: typography.scale.h3.size, fontWeight: '600', color: color.ink[900] },
  body: { fontSize: typography.scale.body.size, color: color.ink[500], textAlign: 'center' },
});