1import React from 'react';
2import { IconName } from '../../types';
3import { TabsBar } from '../Tabs/TabsBar';
4import { Tab } from '../Tabs/Tab';
5import { ModalHeader } from './ModalHeader';
6
7interface ModalTab {
8  value: string;
9  label: string;
10  icon?: IconName;
11}
12
13interface Props {
14  icon: IconName;
15  title: string;
16  tabs: ModalTab[];
17  activeTab: string;
18  onChangeTab(tab: ModalTab): void;
19}
20
21export const ModalTabsHeader: React.FC<Props> = ({ icon, title, tabs, activeTab, onChangeTab }) => {
22  return (
23    <ModalHeader icon={icon} title={title}>
24      <TabsBar hideBorder={true}>
25        {tabs.map((t, index) => {
26          return (
27            <Tab
28              key={`${t.value}-${index}`}
29              label={t.label}
30              icon={t.icon}
31              active={t.value === activeTab}
32              onChangeTab={() => onChangeTab(t)}
33            />
34          );
35        })}
36      </TabsBar>
37    </ModalHeader>
38  );
39};
40