import React from "react";
import { View, Image, Pressable } from "react-native";
import { Text } from "@/components/ui/text";
import { Bell } from "@/lib/icons";
import { ShadowWrapper } from "@/components/ShadowWrapper";
import { MOCK_USER } from "@/lib/mock-data";
import { router } from "expo-router";

export function StandardHeader() {
  return (
    <View className="px-5 pt-4 pb-2 flex-row justify-between items-center bg-background">
      <View className="flex-row items-center gap-3">
        <ShadowWrapper level="xs">
          <Pressable
            onPress={() => router.push("/profile")}
            className="h-[40px] w-[40px] rounded-full border-2 border-primary/20 overflow-hidden"
          >
            <Image
              source={{
                uri: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&q=80&w=200&h=200",
              }}
              className="h-full w-full"
            />
          </Pressable>
        </ShadowWrapper>
        <View>
          <Text
            variant="muted"
            className="text-[10px] uppercase tracking-widest font-bold"
          >
            Welcome back,
          </Text>
          <Text variant="h4" className="text-foreground leading-tight">
            {MOCK_USER.name}
          </Text>
        </View>
      </View>

      <ShadowWrapper level="xs">
        <Pressable className="rounded-full p-2.5 border border-border">
          <Bell color="#000" size={20} strokeWidth={2} />
        </Pressable>
      </ShadowWrapper>
    </View>
  );
}