import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { Pressable, Text, View } from "react-native";
import { IoniconsType } from "../lib/types";

export interface ICustomHeader {
  title: string;
  onBackPress?: () => void;
  showBackButton?: boolean;
  rightIcon?: IoniconsType;
  onRightPress?: () => void;
}
export function CustomHeader({
  title,
  onBackPress,
  showBackButton,
  rightIcon,
  onRightPress,
}: ICustomHeader) {
  function handleBackPress() {
    if (onBackPress) {
      onBackPress();
      return;
    }
    router.back();
  }

  return (
    <View className="mt-2 flex-row items-center gap-4 border-b border-gray-200 px-6 py-2">
      {showBackButton && (
        <Pressable
          className="rounded-full bg-gray-100 p-3"
          onPress={handleBackPress}
        >
          <Ionicons name="arrow-back-outline" size={16} color="#6B7280" />
        </Pressable>
      )}
      <View className="flex-1">
        <Text className="text-xl font-semibold text-gray-800">
          {title}
        </Text>
      </View>
      {rightIcon && (
        <Pressable
          className="ml-auto rounded-full bg-gray-100 p-3"
          onPress={onRightPress}
        >
          <Ionicons name={rightIcon} size={16} color="#6B7280" />
        </Pressable>
      )}
    </View>
  );
}

export interface ModalTemplateProps extends ICustomHeader {
  children?: React.ReactNode;
}

export function ModalTemplate({
  children,
  ...headerProps
}: ModalTemplateProps) {
  return (
    <View>
      <CustomHeader {...headerProps} />
      {children}
    </View>
  );
}