import React, { ReactNode } from 'react';
import { StyleSheet, Text, View, ViewStyle } from 'react-native';
import { colors } from '../theme/colors';

interface SectionCardProps {
  title: string;
  description?: string;
  footer?: ReactNode;
  children?: ReactNode;
  style?: ViewStyle;
}

export const SectionCard: React.FC<SectionCardProps> = ({
  title,
  description,
  footer,
  children,
  style,
}) => {
  return (
    <View style={[styles.card, style]}>
      <View style={styles.headerRow}>
        <Text style={styles.title}>{title}</Text>
        {description ? <Text style={styles.subtitle}>{description}</Text> : null}
      </View>
      {children ? <View style={styles.content}>{children}</View> : null}
      {footer ? <View style={styles.footer}>{footer}</View> : null}
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'rgba(6, 35, 31, 0.95)',
    borderRadius: 24,
    paddingVertical: 22,
    paddingHorizontal: 24,
    borderWidth: 2,
    borderColor: colors.borderStrong,
    shadowColor: colors.shadow,
    shadowOffset: { width: 0, height: 16 },
    shadowOpacity: 0.5,
    shadowRadius: 24,
    elevation: 14,
    gap: 16,
  },
  headerRow: {
    gap: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: '800',
    color: colors.highlightAlt,
    letterSpacing: 0.6,
  },
  subtitle: {
    fontSize: 14,
    color: colors.textSecondary,
    fontWeight: '600',
    letterSpacing: 0.3,
  },
  content: {
    gap: 14,
  },
  footer: {
    paddingTop: 10,
  },
});