import Feather from "@expo/vector-icons/Feather";
import { router, useLocalSearchParams } from "expo-router";
import React from "react";
import {
  Dimensions,
  Image,
  StyleSheet,
  TouchableOpacity,
  View,
} from "react-native";

export default function StackHeader() {
  const { logoUri } = useLocalSearchParams();

  const logoUriString = Array.isArray(logoUri) ? logoUri[0] : logoUri;

  return (
    <View style={styles.header}>
      <TouchableOpacity onPress={() => router.back()}>
        <Feather name="arrow-left" size={26} color="white" />
      </TouchableOpacity>
      <Image style={styles.logo} source={{ uri: logoUriString }} />
      {/* <TouchableOpacity>
        <Feather name="share" size={26} color="white" />
      </TouchableOpacity> */}
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    height: 150,
    backgroundColor: "hsl(221, 39%, 12%)",
    alignItems: "center",
    justifyContent: "space-between",
    flexDirection: "row",
    borderBottomWidth: 1,
    paddingTop: Dimensions.get("window").height * 0.065,
    paddingHorizontal: 20,

    borderBottomColor: "hsl(221, 39%, 15%)",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  logo: {
    width: 100,
    height: 100,
    resizeMode: "contain",
    marginLeft: 10,
  },
  title: {
    color: "white",
    fontSize: 14,
    fontWeight: "bold",
  },
});