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

const spaceToSide = 10; // left and right
const top = 35;
const spaceBetweenButtons = 60;

export const topFirst = top;
export const topSecond = top + spaceBetweenButtons;
export const topThird = top + 2 * spaceBetweenButtons;

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

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

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