import type { ReactNode } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { colors, spacing } from '../../../src/theme';

interface Props {
  visible: boolean;
  onClose?: () => void;
  title?: string;
  children: ReactNode;
  footer?: ReactNode;
}

/** 浅色底圆角卡片弹窗 + 半透明遮罩 */
export function Modal({ visible, onClose, title, children, footer }: Props) {
  if (!visible) return null;
  return (
    <View style={styles.overlay}>
      <Pressable style={styles.scrim} onPress={onClose} />
      <View style={styles.card}>
        {title ? <Text style={styles.title}>{title}</Text> : null}
        <View style={styles.body}>{children}</View>
        {footer ? <View style={styles.footer}>{footer}</View> : null}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  overlay: { ...StyleSheet.absoluteFill, justifyContent: 'center', alignItems: 'center', zIndex: 100 },
  scrim: { ...StyleSheet.absoluteFill, backgroundColor: colors.scrim },
  card: {
    width: '84%',
    backgroundColor: colors.white,
    borderRadius: 8,
    padding: 8,
    maxHeight: '80%',
  },
  title: { fontSize: 18, fontWeight: '800', color: colors.textPrimary, marginBottom: spacing.block, textAlign: 'center' },
  body: { gap: spacing.sm },
  footer: { marginTop: spacing.block, gap: spacing.sm },
});