import React from 'react';
import {View} from 'react-native';
import {Pressable, Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export interface TabItem<T extends string = string> {
  value: T;
  label: string;
}

export interface Props<T extends string = string> {
  tabs: TabItem<T>[];
  activeTab: T;
  onTabChange: (value: T) => void;
}

export function TabBar<T extends string = string>({
  tabs,
  activeTab,
  onTabChange,
}: Props<T>) {
  const {theme} = useTheme();

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: theme.background.layout.default,
          borderBottomColor: theme.border.neutral.default,
        },
      ]}>
      {tabs.map(tab => {
        const isActive = tab.value === activeTab;
        return (
          <Pressable
            key={tab.value}
            onPress={() => onTabChange(tab.value)}
            style={styles.tab}>
            <View style={styles.tabInner}>
              <Typography
                variant="s"
                weight={isActive ? 'semiBold' : 'regular'}
                color={
                  isActive
                    ? theme.text.neutral.brand
                    : theme.text.neutral.lighter
                }
                align="center">
                {tab.label}
              </Typography>
            </View>
            <View
              style={[
                styles.indicator,
                isActive && {backgroundColor: theme.text.neutral.brand},
              ]}
            />
          </Pressable>
        );
      })}
    </View>
  );
}

export default TabBar;