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

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

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

export function ContentTabs({ active, onChange, scope }: ContentTabsProps) {
  return (
    <div className={styles.wrapper}>
      <Tabs
        tabs={TABS}
        active={active}
        onChange={(v) => onChange(v as TabKey)}
      />
      <TabKpis scope={scope} />
    </div>
  );
}