import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { colors, radius, spacing } from '../../../theme';
import { ProfileTabKey } from '../types/profile.types';
import TabItem from './TabItem';

type ProfileTabsProps = {
  activeTab: ProfileTabKey;
  onChangeTab: (tab: ProfileTabKey) => void;
};

const ProfileTabs = ({ activeTab, onChangeTab }: ProfileTabsProps) => {
  const { t } = useTranslation('profile');

  return (
    <View style={styles.tabs}>
      <TabItem
        icon="user"
        label={t('tabs.informations', 'Informations')}
        active={activeTab === 0}
        onPress={() => onChangeTab(0)}
      />

      <TabItem
        icon="lock"
        label={t('tabs.password', 'Mot de passe')}
        active={activeTab === 1}
        onPress={() => onChangeTab(1)}
      />
    </View>
  );
};

export default ProfileTabs;

const styles = StyleSheet.create({
  tabs: {
    flexDirection: 'row',
    backgroundColor: colors.gray200,
    borderRadius: radius.md,
    padding: 4,
    marginVertical: spacing.lg,
  },
});