import React from "react";
import { View, Text, StyleSheet, Platform } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useThemeContext } from "@/hooks/use-theme-context";

interface FormSectionProps {
  title: string;
  icon?: keyof typeof Ionicons.glyphMap;
  children: React.ReactNode;
}

/**
 * A styled section wrapper for grouping related form fields
 */
export default function FormSection({ title, icon, children }: FormSectionProps) {
  const { colors } = useThemeContext();

  return (
    <View style={[styles.container, { borderColor: colors.separator }]}>
      <View style={styles.header}>
        {icon && (
          <Ionicons name={icon} size={18} color={colors.primary} style={styles.icon} />
        )}
        <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
      </View>
      <View style={styles.content}>{children}</View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
    borderBottomWidth: 1,
    paddingBottom: 16,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 16,
  },
  icon: {
    marginRight: 8,
  },
  title: {
    fontSize: 17,
    fontWeight: "700",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  content: {
    gap: 0,
  },
});