import { forwardRef } from 'react';
import { Pressable, Text, View } from 'react-native';
import type { RsSkinlessTabBarProps } from '../../types/props';

type ViewRef = View;

const RsTabBar = forwardRef<ViewRef, RsSkinlessTabBarProps>(
  ({ tabs, activeTab, onTabChange, style }, ref) => {
    return (
      <View ref={ref} style={[{ flexDirection: 'row' }, style]}>
        {tabs.map((tab) => (
          <Pressable
            key={tab.key}
            onPress={() => onTabChange(tab.key)}
            accessibilityRole="tab"
            accessibilityState={{ selected: tab.key === activeTab }}
            style={{ flex: 1, alignItems: 'center' }}
          >
            <Text>{tab.label}</Text>
          </Pressable>
        ))}
      </View>
    );
  }
);

RsTabBar.displayName = 'RsTabBar';

export default RsTabBar;