import { Tabs } from '@cameleer/design-system';
import type { TabKey, Scope } from '../hooks/useScope';
import { TabKpis } from './TabKpis';
import styles from './ContentTabs.module.css';

const BASE_TABS = [
  { label: 'Exchanges', value: 'exchanges' },
  { label: 'Dashboard', value: 'dashboard' },
  { label: 'Runtime', value: 'runtime' },
  { label: 'Logs', value: 'logs' },
];

const TABS_WITH_CONFIG = [
  ...BASE_TABS,
  { label: 'Config', value: 'config' },
];

interface ContentTabsProps {
  active: TabKey;
  onChange: (tab: TabKey) => void;
  scope: Scope;
}

export function ContentTabs({ active, onChange, scope }: ContentTabsProps) {
  // Config tab only shown when an app is selected
  const tabs = scope.appId ? TABS_WITH_CONFIG : BASE_TABS;
  return (
    <div className={styles.wrapper}>
      <Tabs
        tabs={tabs}
        active={active}
        onChange={(v) => onChange(v as TabKey)}
      />
      <TabKpis scope={scope} />
    </div>
  );
}