import React from "react";
import { TouchableOpacity, View, StyleSheet } from "react-native";
import { Bell } from "lucide-react-native";
import { useRouter } from "expo-router";
import Colors from "@/constants/colors";
import { useUnreadNotificationCount } from "@/lib/mobile/api-layer";

interface NotificationBellButtonProps {
  color?: string;
  size?: number;
  hitSlop?: { top: number; bottom: number; left: number; right: number };
  style?: object;
}

export function NotificationBellButton({
  color = Colors.dark.primary,
  size = 22,
  hitSlop = { top: 10, bottom: 10, left: 10, right: 10 },
  style,
}: NotificationBellButtonProps) {
  const router = useRouter();
  const unread = useUnreadNotificationCount();

  return (
    <TouchableOpacity
      onPress={() => router.push("/notifications")}
      hitSlop={hitSlop}
      style={[styles.wrap, style]}
      accessibilityLabel={unread > 0 ? `Notifications, ${unread} unread` : "Notifications"}
      accessibilityRole="button"
    >
      <Bell color={color} size={size} />
      {unread > 0 ? <View style={styles.dot} /> : null}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  wrap: {
    position: "relative",
  },
  dot: {
    position: "absolute",
    top: -2,
    right: -2,
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: "#EF4444",
    borderWidth: 2,
    borderColor: Colors.dark.background,
  },
});