import { Image, Pressable, View } from "react-native";
import { Motion } from "@legendapp/motion";

import { icons } from "../assets";
import { Fonts, gutters, Palette, Style } from "../styles";
import { goBack } from "../navigation/NavigationService";
import { FONT_FAMILY } from "../styles/Fonts";

export default ({
  title = "",
  rightComponent = null,
  onBackPressed = null,
  containerStyle = {},
  headerTitleStyle = {},
  hideBackButton = false,
}) => {
  return (
    <View
      style={[
        Style.containerSpaceBetween,
        {
          alignItems: "flex-start",
          marginBottom: gutters / 2,
          paddingTop: 10,
          ...containerStyle,
        },
      ]}
    >
      <View style={{ flex: 1 }}>
        {!hideBackButton && (
          <Pressable onPress={() => onBackPressed?.() || goBack()}>
            <Image
              source={icons.chevronDown}
              style={[
                Style.iconSmall,
                Style.mirrorHorizontal,
                { transform: [{ rotate: "90deg" }] },
              ]}
              resizeMode="contain"
            />
          </Pressable>
        )}
      </View>

      <Motion.Text
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0.2 }}
        transition={{
          default: {
            type: "spring",
          },
          opacity: {
            type: "timing",
          },
        }}
        style={{
          fontSize: 16,
          color: Palette.white,
          fontFamily: FONT_FAMILY.InterRegular,
          ...headerTitleStyle,
        }}
      >
        {title}
      </Motion.Text>

      <View style={{ flex: 1, alignItems: "flex-end" }}>
        {rightComponent?.() || null}
      </View>
    </View>
  );
};