import React, { useCallback } from "react";
import { useAuth } from "../../hooks/useAuth";
import { SettingsRow, SettingsSection } from "../settings-row";

export interface DangerZoneSectionProps {
  onClose: () => void;
  /**
   * Fires when the user taps Delete Account. Apps wire this to a
   * confirm-and-delete dialog (which then calls
   * `useAuth().deleteAccount(password)`). Without it the row is hidden.
   */
  onRequestDeleteAccount?: () => void;
}

/** Generic DANGER ZONE section — Sign out + (optionally) Delete account. */
export function DangerZoneSection({ onClose, onRequestDeleteAccount }: DangerZoneSectionProps) {
  const { logout } = useAuth();

  const handleSignOut = useCallback(() => {
    onClose();
    logout();
  }, [onClose, logout]);

  return (
    <SettingsSection title="DANGER ZONE" destructive>
      <SettingsRow icon="log-out-outline" label="Sign Out" destructive onPress={handleSignOut} />
      {onRequestDeleteAccount ? (
        <SettingsRow
          icon="trash-outline"
          label="Delete Account"
          destructive
          onPress={onRequestDeleteAccount}
        />
      ) : null}
    </SettingsSection>
  );
}