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

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

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

export function ContentTabs({ active, onChange, scope }: ContentTabsProps) {
  const canControl = useCanControl();
  const tabs = useMemo(() => {
    if (!canControl) return BASE_TABS;
    return [...BASE_TABS, { label: 'Deployments', value: 'apps' }];
  }, [canControl]);

  return (
    <div className={styles.wrapper}>
      <Tabs
        tabs={tabs}
        active={active}
        onChange={(v) => onChange(v as TabKey)}
      />
      <TabKpis scope={scope} />
    </div>
  );
}
