hipmi-mobile/screens/Profile/AvatarAndBackground.tsx

import { AvatarComp, ClickableCustom } from "@/components";
import API_STRORAGE from "@/constants/base-url-api-strorage";
import { AccentColor } from "@/constants/color-palet";
import DUMMY_IMAGE from "@/constants/dummy-image-value";
import { router } from "expo-router";
import { ImageBackground, StyleSheet, View } from "react-native";

const AvatarAndBackground = ({
  backgroundId,
  imageId,
}: {
  backgroundId: string;
  imageId: string;
}) => {
  return (
    <View style={styles.container}>
      {/* Background Image */}
      <ClickableCustom
        onPress={() => {
          router.navigate(
            `/(application)/(image)/preview-image/${backgroundId}`
          );
        }}
        disabled={!backgroundId}
      >
        <ImageBackground
          source={
            backgroundId
              ? { uri: API_STRORAGE.GET({ fileId: backgroundId }) }
              : DUMMY_IMAGE.background
          }
          style={styles.backgroundImage}
          resizeMode="cover"
        />
      </ClickableCustom>

      {/* Avatar yang sedikit keluar */}
      <View style={styles.avatarOverlap}>
        <AvatarComp size="lg" fileId={imageId} />
      </View>
    </View>
  );
};

export default AvatarAndBackground;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  backgroundImage: {
    width: "100%",
    height: 150, // Tinggi background sesuai kebutuhan
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 6,
    overflow: "hidden",
    borderWidth: 1,
    borderColor: AccentColor.blue,
    backgroundColor: "white",
  },
  avatarOverlap: {
    position: "absolute", // Meletakkan avatar di atas background
    top: 90, // Posisi avatar sedikit keluar dari background
    left: "50%", // Sentralisasi horizontal
    transform: [{ translateX: -50 }], // Menggeser ke kiri 50% lebarnya
  },
});