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

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

export default ({
  title = "",
  rightComponent = null,
  onBackPressed = null,
  containerStyle = {},
}) => {
  return (
    <View
      style={[
        Style.containerSpaceBetween,
        {
          alignItems: "flex-start",
          marginBottom: gutters / 2,
          ...containerStyle,
        },
      ]}
    >
      <Pressable onPress={() => onBackPressed?.() || goBack()}>
        <Image
          source={icons.arrowRight}
          style={[Style.iconDefault, Style.mirrorHorizontal]}
        />
      </Pressable>

      {typeof title === "function" ? (
        title()
      ) : title?.length > 0 ? (
        <Motion.Text
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0.2 }}
          transition={{
            default: {
              type: "spring",
            },
            opacity: {
              type: "timing",
            },
          }}
          style={Fonts({
            type: "navigationTitle",
            style: {
              fontSize:
                title.length > 15
                  ? Fonts({ type: "section" }).fontSize
                  : Fonts({ type: "navigationTitle" }).fontSize,
            },
          })}
        >
          {title}
        </Motion.Text>
      ) : null}

      <View>{rightComponent?.() || null}</View>
    </View>
  );
};
