'use client';
import { FunctionComponent } from 'react';
import { Divider, Stack, Typography } from '@mui/material';
import { useTranslations } from 'next-intl';
import AppIcon from '@/components/common/AppIcon';
import LocaleSwitcher from '@/components/common/LocaleSwitcher';
import SurfaceCard from '@/components/common/SurfaceCard';
import ThemeModeSetting from './ThemeModeSetting';

/**
 * The app's one appearance-and-language surface. Both controls used to sit in every shell's top
 * bar (three of them), which spent permanent chrome on set-once preferences and made the header
 * the busiest element on a phone-width screen. They live here now, reachable from each actor's
 * settings hub, and nowhere else.
 * @component SettingsPanel
 */
const SettingsPanel: FunctionComponent = () => {
  const t = useTranslations('common');

  return (
    <SurfaceCard sx={{ p: 0, overflow: 'hidden' }}>
      <Stack divider={<Divider />}>
        <Stack direction="row" sx={{ alignItems: 'center', gap: 1.5, px: 2, py: 1.25, minWidth: 0 }}>
          <AppIcon icon="language" size={18} color="var(--bal-text-secondary)" aria-hidden="true" />
          <Typography variant="body2" sx={{ flexGrow: 1, minWidth: 0 }}>
            {t('language')}
          </Typography>
          <LocaleSwitcher />
        </Stack>

        <ThemeModeSetting />
      </Stack>
    </SurfaceCard>
  );
};

export default SettingsPanel;
