import { Pressable, View } from "react-native";
import React from "react";
import styles from "./style";
import { windowHeight } from "@src/themes";
import { appColors } from "@src/themes";
import { IconBgPropType } from "../type";
import { useValues } from "@src/utils/context";

export function IconBackground({
  onPress,
  icon,
  height,
  backgroundColor,
  borderColor,
}: IconBgPropType) {
  const { isDark } = useValues();
  return (
    <Pressable
      onPress={onPress}
      style={[{ height: height || windowHeight(35) }]}
    >
      <View
        style={[
          styles.container,
          {
            backgroundColor:
              backgroundColor || isDark
                ? appColors.darkHeader
                : appColors.whiteColor,
          },
          {
            borderColor:
              borderColor || isDark
                ? appColors.darkBorder
                : appColors.whiteColor,
          },
        ]}
      >
        {icon}
      </View>
    </Pressable>
  );
}
