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

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

  return (
    <View style={styles.header}>
      <TouchableOpacity onPress={() => router.back()}>
        <Feather name="arrow-left" size={26} color="white" />
      </TouchableOpacity>
      <Text style={styles.title}>{title}</Text>
      <TouchableOpacity>
        <Feather name="share" size={26} color="white" />
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    height: 125,
    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,
  },
  title: {
    color: "white",
    fontSize: 22,
    fontWeight: "bold",
  },
});