import React from 'react';
import {
  View,
  StyleSheet,
  TouchableOpacity,
  ViewStyle,
  StyleProp,
} from 'react-native';
import { ThemedText } from './themed-text';
import { Colors, Spacing, BorderRadius, FontSize, Shadow } from '@/constants/theme';

interface EmptyStateProps {
  icon?: string;
  title: string;
  description?: string;
  actionText?: string;
  onAction?: () => void;
  style?: StyleProp<ViewStyle>;
}

export function EmptyState({
  icon = '📄',
  title,
  description,
  actionText,
  onAction,
  style,
}: EmptyStateProps) {
  return (
    <View style={[styles.container, style]}>
      <View style={styles.content}>
        <ThemedText style={styles.icon}>{icon}</ThemedText>

        <ThemedText style={styles.title}>{title}</ThemedText>

        {description ? (
          <ThemedText style={styles.description}>
            {description}
          </ThemedText>
        ) : null}

        {actionText && onAction ? (
          <TouchableOpacity
            style={styles.actionButton}
            onPress={onAction}
            activeOpacity={0.8}
          >
            <ThemedText style={styles.actionText}>
              {actionText}
            </ThemedText>
          </TouchableOpacity>
        ) : null}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: Colors.background.secondary,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: Spacing.xxl,
  },
  content: {
    alignItems: 'center',
    maxWidth: 280,
  },
  icon: {
    fontSize: 48,
    lineHeight: 64,
    marginBottom: Spacing.lg,
  },
  title: {
    fontSize: FontSize.md,
    fontWeight: '600',
    color: Colors.text.primary,
    textAlign: 'center',
    marginBottom: Spacing.sm,
  },
  description: {
    fontSize: FontSize.sm,
    color: Colors.text.tertiary,
    textAlign: 'center',
    lineHeight: 20,
    marginBottom: Spacing.lg,
  },
  actionButton: {
    backgroundColor: Colors.brand.primary,
    paddingHorizontal: Spacing.xl,
    paddingVertical: Spacing.md,
    borderRadius: BorderRadius.md,
    minWidth: 120,
    alignItems: 'center',
    justifyContent: 'center',
    ...Shadow.small,
  },
  actionText: {
    color: '#ffffff',
    fontSize: FontSize.md,
    fontWeight: '600',
  },
});