import React, { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
import { Page, PageContent, PageHeader } from '../../components/page';
import { SettingsContentCenter } from './styles.css';

type SettingsPageProps = {
  title: ReactNode;
  requestClose: () => void;
  children: ReactNode;
};

/**
 * Shared chrome for every settings sub-page — Dawn `SurfaceVariant` surface, a
 * title header with the close button, and a hover-scrolled content column.
 * Sections inside are spaced with a single rhythm (gap 500) so grouped panels
 * read as a consistent vertical stack.
 */
export function SettingsPage({ title, requestClose, children }: SettingsPageProps) {
  const { t } = useTranslation();
  return (
    <Page variant="SurfaceVariant">
      {/* paddingRight:0 matches PageContent so the header's centered 720 column
          lines up exactly with the content column below (PageHeader defaults to
          a S200 right pad, which would shift the title ~4px off the content). */}
      <PageHeader outlined={false} style={{ paddingRight: 0 }}>
        <Box className={SettingsContentCenter} gap="200" alignItems="Center">
          <Box grow="Yes" alignItems="Center" gap="200">
            <Text size="H3" truncate>
              {title}
            </Text>
          </Box>
          <Box shrink="No" alignItems="Center" gap="200">
            <IconButton
              onClick={requestClose}
              variant="SurfaceVariant"
              aria-label={t('Settings.close')}
            >
              <Icon src={Icons.Cross} />
            </IconButton>
          </Box>
        </Box>
      </PageHeader>
      <Box grow="Yes">
        <Scroll hideTrack visibility="Hover">
          <PageContent style={{ paddingBottom: '1rem' }}>
            <Box className={SettingsContentCenter} direction="Column" gap="500">
              {children}
            </Box>
          </PageContent>
        </Scroll>
      </Box>
    </Page>
  );
}