import Feather from "@expo/vector-icons/Feather";
import { BlurView } from "expo-blur";
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 (
    <BlurView intensity={60} tint="dark" style={styles.header}>
      <TouchableOpacity onPress={() => router.back()}>
        <BlurView intensity={40} tint="light" style={styles.backButton}>
          <Feather
            name="chevron-left"
            size={22}
            color="rgba(255,255,255,0.95)"
          />
        </BlurView>
      </TouchableOpacity>
      <Image style={styles.logo} source={{ uri: logoUriString }} />
      <View style={{ width: 40 }} />
    </BlurView>
  );
}

const styles = StyleSheet.create({
  header: {
    height: 140,
    alignItems: "center",
    justifyContent: "space-between",
    flexDirection: "row",
    paddingTop: Dimensions.get("window").height * 0.06,
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: "rgba(255,255,255,0.08)",
  },
  backButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    overflow: "hidden",
    justifyContent: "center",
    alignItems: "center",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(255,255,255,0.18)",
  },
  logo: {
    width: 100,
    height: 100,
    resizeMode: "contain",
  },
  title: {
    color: "white",
    fontSize: 14,
    fontWeight: "600",
  },
});