import React from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ViewStyle,
  StyleProp,
} from "react-native";
import { useTheme } from "../contexts/ThemeContext";

interface SectionHeaderProps {
  title: string;
  subtitle?: string;
  actionLabel?: string;
  onActionPress?: () => void;
  style?: StyleProp<ViewStyle>;
}

/**
 * SectionHeader - Clean section header with optional action button
 *
 * Usage:
 * - Divides content into logical sections
 * - Optional subtitle for additional context
 * - Optional action button (e.g., "See All", "Add New")
 */
export function SectionHeader({
  title,
  subtitle,
  actionLabel,
  onActionPress,
  style,
}: SectionHeaderProps) {
  const { colors, typography } = useTheme();

  return (
    <View style={[styles.container, style]}>
      <View style={styles.textContainer}>
        <Text style={[typography.h2, { color: colors.textPrimary }]}>
          {title}
        </Text>
        {subtitle && (
          <Text
            style={[
              typography.caption,
              { color: colors.textTertiary, marginTop: 2 },
            ]}
          >
            {subtitle}
          </Text>
        )}
      </View>
      {actionLabel && onActionPress && (
        <TouchableOpacity onPress={onActionPress} activeOpacity={0.7}>
          <Text
            style={[
              typography.body,
              { color: colors.primary, fontWeight: "600" },
            ]}
          >
            {actionLabel}
          </Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 12,
  },
  textContainer: {
    flex: 1,
  },
});