/* @flow */
import React from 'react';

type TabModel = {
  id: string,
  active: boolean,
  label: string,
};
type TabProps = {
  active: boolean,
  label: string,
}
type TabBarProps = {
  tabs: TabModel[]
};
type PageProps = {
  tabs: TabModel[]
}

const Tab = ({ active, label }: TabProps) =>
  <li className={active && 'active'}>{label}</li>;

const TabBar = ({ tabs }: TabBarProps) =>
  <div className="tab-bar">
    Tabs:
    <ul>
      {tabs.map(tab =>
        <Tab key={tab.id} active={tab.active} label={tab.label} />,
      )}
    </ul>
  </div>;

const Page = ({ tabs }: PageProps) =>
  <TabBar tabs={tabs} />;