import { useState } from 'react';
import { AccountsList } from '../components/AccountsList';
import { CategoriesList } from '../components/CategoriesList';
import { RulesList } from '../components/RulesList';
import { DataSection } from '../components/DataSection';

type Tab = 'accounts' | 'categories' | 'rules' | 'data';

export function SettingsPage() {
  const [tab, setTab] = useState<Tab>('accounts');

  return (
    <div className="page">
      <div className="page-header">
        <h1>Настройки</h1>
      </div>

      <div className="tabs">
        <button
          className={`tab ${tab === 'accounts' ? 'active' : ''}`}
          onClick={() => setTab('accounts')}
        >
          Счета
        </button>
        <button
          className={`tab ${tab === 'categories' ? 'active' : ''}`}
          onClick={() => setTab('categories')}
        >
          Категории
        </button>
        <button
          className={`tab ${tab === 'rules' ? 'active' : ''}`}
          onClick={() => setTab('rules')}
        >
          Правила
        </button>
        <button
          className={`tab ${tab === 'data' ? 'active' : ''}`}
          onClick={() => setTab('data')}
        >
          Данные
        </button>
      </div>

      <div className="tab-content">
        {tab === 'accounts' && <AccountsList />}
        {tab === 'categories' && <CategoriesList />}
        {tab === 'rules' && <RulesList />}
        {tab === 'data' && <DataSection />}
      </div>
    </div>
  );
}