import { View, Text, Pressable } from "react-native";
import { useThemeStore } from "../stores/ThemeStore";
import { ComponentProps, ReactNode } from "react";
import { Ionicons } from "@expo/vector-icons";

type HeaderProps = {
  children?: ReactNode;
  className?: string;
};

const Header = (props: HeaderProps) => {
  const { theme } = useThemeStore();
  return (
    <View>
      <View
        className={`w-full h-32 pt-10 pb-4 ${props.className}`}
        style={{
          backgroundColor: theme.chatBot,
        }}
      >
        {props.children}
      </View>
      <View
        className="h-2 bg-black"
        style={{
          shadowColor: theme.shadowColor,
          shadowOffset: {
            width: 0,
            height: 5,
          },
          shadowOpacity: 0.34,
          shadowRadius: 6.27,

          elevation: 10,
        }}
      />
    </View>
  );
};

type HeaderButton = {
  className?: string;
  iconName: ComponentProps<typeof Ionicons>["name"];
  iconSize: number;
  onPress?: () => void;
};

export const HeaderButton = (props: HeaderButton) => {
  const { theme } = useThemeStore();

  return (
    <Pressable
      onPress={props.onPress}
      className={
        "w-16 h-16 flex items-center justify-center mx-2 rounded-xl border border-solid absolute left-6 " +
        props.className
      }
      style={{
        backgroundColor: theme.chatBot,
        borderColor: theme.primeFg,
        // iOS shadow
        shadowColor: theme.shadowColor,
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 8,
        // Android shadow
        elevation: 6,
      }}
    >
      <Ionicons
        name={props.iconName}
        size={props.iconSize}
        color={theme.buttonText}
      />
    </Pressable>
  );
};

type SimpleHeaderProps = {
  text: string;
};

export const SimpleHeader = ({ text }: SimpleHeaderProps) => (
  <Header>
    <View className="h-full flex justify-center">
      <Text className="text-center text-3xl font-bold">{text}</Text>
    </View>
  </Header>
);

export default Header;
