import { useTranslation } from 'react-i18next';
import { XIcon } from '@phosphor-icons/react';
import {
  renderSettingsSection,
  type SettingsSectionInitialState,
  type SettingsSectionType,
} from './settingsRegistry';

export type { SettingsSectionInitialState, SettingsSectionType };

interface SettingsSectionProps {
  type: SettingsSectionType;
  onClose?: () => void;
  initialState?: SettingsSectionInitialState[SettingsSectionType];
}

export function SettingsSection({
  type,
  onClose,
  initialState,
}: SettingsSectionProps) {
  const { t } = useTranslation('settings');

  return (
    <div className="flex flex-col h-full">
      <div className="p-4 border-b border-border bg-panel/95 backdrop-blur-sm hidden sm:flex items-center justify-between">
        <h2 className="text-lg font-semibold text-high">
          {t(`settings.layout.nav.${type}`)}
        </h2>
        {onClose && (
          <button
            onClick={onClose}
            className="rounded-sm opacity-70 ring-offset-panel transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2"
          >
            <XIcon className="h-4 w-4 text-normal" weight="bold" />
            <span className="sr-only">
              {t('buttons.close', { ns: 'common' })}
            </span>
          </button>
        )}
      </div>

      <div className="space-y-6 px-6 pt-4 overflow-y-auto">
        {renderSettingsSection(type, initialState, onClose)}
      </div>
    </div>
  );
}
