import React from "react";
import { useColorScheme } from "nativewind";
import { SettingsRow, SettingsSection } from "../settings-row";

export interface GeneralSectionProps {
  notifications: boolean;
  onNotificationsToggle: (v: boolean) => void;
  /** Fired when the user taps the Appearance row. Apps wire this to a
   *  theme-picker dialog. When omitted the row renders without chevron. */
  onOpenAppearance?: () => void;
}

/** Generic GENERAL section — notifications toggle + appearance picker. */
export function GeneralSection({
  notifications,
  onNotificationsToggle,
  onOpenAppearance,
}: GeneralSectionProps) {
  const { colorScheme } = useColorScheme();
  return (
    <SettingsSection title="GENERAL">
      <SettingsRow
        icon="notifications-outline"
        label="Notifications"
        subtitle="Security alerts and reminders"
        toggle
        value={notifications}
        onValueChange={onNotificationsToggle}
      />
      <SettingsRow
        icon="color-palette-outline"
        label="Appearance"
        subtitle={colorScheme === "dark" ? "Dark" : "Light"}
        onPress={onOpenAppearance}
        showChevron={Boolean(onOpenAppearance)}
      />
    </SettingsSection>
  );
}