import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { Colors } from "@/constants/theme";
import { useTheme } from "@/context/ThemeContext";
import { useRouter } from "expo-router";
import React from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, TouchableOpacity } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export function HomeHeader() {
  const router = useRouter();
  const { theme } = useTheme();
  const { t } = useTranslation();
  const iconColor = theme === "light" ? Colors.light.icon : Colors.dark.icon;

  return (
    <ThemedView style={styles.container}>
      <SafeAreaView edges={["top"]} style={styles.safeArea}>
        <ThemedView style={styles.headerContent}>
          <ThemedText type="title" style={styles.title}>
            {t("home.title")}
          </ThemedText>
          <ThemedView style={styles.actions}>
            <TouchableOpacity
              style={styles.iconButton}
              onPress={() => router.push("/search")}
            >
              <IconSymbol name="search" size={24} color={iconColor} />
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.iconButton}
              onPress={() => router.push("/profile")}
            >
              <IconSymbol name="person-circle" size={24} color={iconColor} />
            </TouchableOpacity>
          </ThemedView>
        </ThemedView>
      </SafeAreaView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 0,
  },
  safeArea: {
    paddingBottom: 10,
    paddingHorizontal: 16,
  },
  headerContent: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingTop: 8,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
  },
  actions: {
    flexDirection: "row",
    gap: 16,
    alignItems: "center",
  },
  iconButton: {
    padding: 4,
  },
});