<script lang="ts">
  import AccountSwitcher from '../../commercial/AccountSwitcher.svelte';
  import PluginMarketplace from '../../commercial/PluginMarketplace.svelte';

  let activeSection = $state<'accounts' | 'marketplace'>('accounts');
</script>

<div class="pro-settings">
  <div class="pro-tabs">
    <button class="pro-tab" class:active={activeSection === 'accounts'} onclick={() => activeSection = 'accounts'}>
      Accounts
    </button>
    <button class="pro-tab" class:active={activeSection === 'marketplace'} onclick={() => activeSection = 'marketplace'}>
      Marketplace
    </button>
  </div>

  <div class="pro-content">
    {#if activeSection === 'accounts'}
      <AccountSwitcher />
    {:else}
      <PluginMarketplace />
    {/if}
  </div>
</div>

<style>
  .pro-settings { display: flex; flex-direction: column; gap: 0.5rem; }
  .pro-tabs { display: flex; gap: 0.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ctp-surface0); }
  .pro-tab { padding: 0.3rem 0.75rem; background: none; border: none; border-radius: 0.25rem;
    color: var(--ctp-subtext0); cursor: pointer; font-size: 0.8rem; }
  .pro-tab:hover { background: var(--ctp-surface0); color: var(--ctp-text); }
  .pro-tab.active { background: color-mix(in srgb, var(--ctp-peach) 15%, transparent); color: var(--ctp-peach); }
  .pro-content { flex: 1; overflow-y: auto; }
</style>
