import { useContext } from "react";
import { AppContext, AppStyles } from "../../utils";
import { TouchableHighlight, TouchableOpacity, View } from "react-native";
import MyIcon from "../../Components/Icon";

export function MyDeviceTabButton({ iconName, iconColor, onPress }) {
  const appContext = useContext(AppContext);

  const TouchComponent =
    appContext.appColorScheme === "dark"
      ? TouchableHighlight
      : TouchableOpacity;

  return (
    <TouchComponent
      onPress={onPress}
      style={{
        backgroundColor: appContext.appTheme.card.backgroundColor,
        borderRadius: 10,
        padding: 8,
      }}
    >
      <MyIcon name={iconName} size={30} color={iconColor} />
    </TouchComponent>
  );
}

export function MyDeviceTabButtonContainer({ children }) {
  return (
    <View
      style={[
        {
          justifyContent: "space-evenly",
          position: "absolute",
          paddingTop: 6,
          paddingBottom: 6,
          right: 10,
        },
        AppStyles.deviceLivePreview,
      ]}
    >
      {children}
    </View>
  );
}
