import React from 'react';
import { StyleSheet, View } from 'react-native';
import { responsiveHeight } from 'react-native-responsive-dimensions';
import { InstitutionTabTypes, InstitutionTabType } from '../../types';
import Tab from '../Tab';

interface InstitutionsTabsProps {
  activeTab: InstitutionTabTypes;
  onChangeActiveTab: (activeTab: InstitutionTabTypes) => void;
}

const InstitutionsTabs = (props: InstitutionsTabsProps) => {
  const { activeTab, onChangeActiveTab } = props;

  return (
    <View style={styles.container}>
      <View style={styles.tab}>
        <Tab
          left
          title="Personal"
          active={activeTab === InstitutionTabType.PERSONAL}
          onPress={() => onChangeActiveTab('PERSONAL')}
        />
      </View>
      <View style={styles.tab}>
        <Tab
          title="Business"
          active={activeTab === InstitutionTabType.BUSINESS}
          onPress={() => onChangeActiveTab('BUSINESS')}
        />
      </View>
      <View style={styles.tab}>
        <Tab
          right
          title="Investment"
          active={activeTab === InstitutionTabType.INVESTMENT}
          onPress={() => onChangeActiveTab('INVESTMENT')}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: responsiveHeight(2),
  },

  tab: { flex: 1 },
});
export default InstitutionsTabs;