import React from "react";
import { Dimensions, View } from "react-native";
import MagicTabs, { MagicTabsItemsProps } from "react-native-magic-tabs";

const App = () => {
  const screenWidth = Dimensions.get("window").width;
  const [activeIndex, setActiveIndex] = React.useState(6);

  const tabs: MagicTabsItemsProps[] = [
    { id: 1, name: "Tab 1" },
    { id: 2, name: "Tab 2" },
    // Add more tabs as needed
  ];

  const onPress = (index: number) => {
    console.log("Selected tab:", index);
  };

  return (
    <View style={{ flex: 1 }}>
      <MagicTabs
        items={NavigationTabs}
        onPress={onPress}
        activeIndex={activeIndex}
        style={{ marginBottom: 12 }}
        spaceBetween={8}
        animated={true}
        width={screenWidth}
        buttonStyle={{
          flex: 1,
          borderRadius: 6,
          paddingHorizontal: 12,
          paddingVertical: 7,
        }}
        activeButtonStyle={{
          flex: 1,
          borderRadius: 6,
          paddingHorizontal: 12,
          paddingVertical: 7,
        }}
        textStyle={{ fontSize: 12, fontWeight: "bold" }}
        activeTextStyle={{ fontSize: 12, fontWeight: "bold" }}
        backgroundColor={"#B02132"}
        activeBackgroundColor={"#fff"}
        textColor={"#fff"}
        activeTextColor={"#C62538"}
        height={30}
        customItem={false}
        align="center"
      />
    </View>
  );
};

export default App;