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

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

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

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