import React from "react";
import { useNavigation } from "../../context/NavigationContext";
import { SettingsRow, SettingsSection } from "../settings-row";
import { useAppConfig } from "../../context/AppConfigContext";

export interface SupportSectionProps {
  onClose: () => void;
  /** Wire to the app's help screen / web URL. Optional. */
  onOpenHelp?: () => void;
  /** Wire to the app's about modal / screen. Optional. */
  onOpenAbout?: () => void;
}

/** Generic SUPPORT section — Help, About, Privacy Policy, Terms of Service. */
export function SupportSection({ onClose, onOpenHelp, onOpenAbout }: SupportSectionProps) {
  const router = useNavigation();
  const { routes } = useAppConfig();

  return (
    <SettingsSection title="SUPPORT">
      <SettingsRow
        icon="help-circle-outline"
        label="Help & Support"
        onPress={onOpenHelp}
        showChevron={Boolean(onOpenHelp)}
      />
      <SettingsRow
        icon="information-circle-outline"
        label="About"
        onPress={onOpenAbout}
        showChevron={Boolean(onOpenAbout)}
      />
      <SettingsRow
        icon="document-text-outline"
        label="Privacy Policy"
        onPress={() => {
          onClose();
          router.push(routes.privacyPolicy);
        }}
        showChevron
      />
      <SettingsRow
        icon="document-outline"
        label="Terms of Service"
        onPress={() => {
          onClose();
          router.push(routes.termsOfService);
        }}
        showChevron
      />
    </SettingsSection>
  );
}