import React, { Children, ReactNode } from 'react';
import { Box, Text } from 'folds';
import { SectionFootnote, SectionLabel, SettingFlatGroup, SettingFlatRow } from './styles.css';

type SettingsSectionProps = {
  // Uppercase muted heading above the list. Omit for an unlabelled section.
  label?: ReactNode;
  // Small caption under the label (rare — e.g. a privacy note).
  footnote?: ReactNode;
  // Each direct child becomes one row of the flat list. Falsy children
  // (conditional rows) are dropped so the hairline dividers stay correct.
  children: ReactNode;
};

/**
 * A Dawn flat settings list: an uppercase muted label over edge-to-edge rows
 * parted by hairline dividers — no card box or surface fill (iOS/Telegram
 * grouped-list feel). Replaces the stock-Cinny "floating outlined card per
 * setting" pattern.
 */
export function SettingsSection({ label, footnote, children }: SettingsSectionProps) {
  const rows = Children.toArray(children).filter(Boolean);
  if (rows.length === 0) return null;

  return (
    <Box direction="Column" gap="100">
      {label && (
        <Box direction="Column">
          <Text as="span" className={SectionLabel}>
            {label}
          </Text>
          {footnote && (
            <Text as="span" className={SectionFootnote}>
              {footnote}
            </Text>
          )}
        </Box>
      )}
      <div className={SettingFlatGroup}>
        {rows.map((row, index) => (
          <div
            // Rows are positional and have no stable id; index key is correct
            // here — the list never reorders, only conditionally includes rows.
            // eslint-disable-next-line react/no-array-index-key
            key={index}
            className={SettingFlatRow}
          >
            {row}
          </div>
        ))}
      </div>
    </Box>
  );
}