import React from "reactn";
import { Image, Pressable, Text, View } from "react-native";
import { responsiveWidth } from "../actions/responsiveSizes.js";

import { icons } from "../assets";
import { Fonts, Style, gutters } from "../styles";

import { Routes } from "../navigation";
import { navigate } from "../navigation/NavigationService";

import useLayoutType, { sidebarWidth } from "../hooks/useLayoutType.js";

export default ({ title = "", containerStyle = {} }) => {
  const { isDesktop } = useLayoutType();

  return (
    <View
      style={[
        Style.containerSpaceBetween,
        { marginBottom: 20, ...containerStyle },
      ]}
    >
      <View style={Style.containerRow}>
        <Text
          numberOfLines={1}
          style={{
            ...Fonts({
              type: "mainTitle",
              style: {
                marginRight: 10,
                maxWidth: isDesktop
                  ? sidebarWidth - 4 * gutters
                  : responsiveWidth(70),
              },
            }),
          }}
        >
          {title}
        </Text>
      </View>

      <View style={{ ...Style.containerRow }}>
        <Pressable onPress={() => navigate(Routes.Notifications)}>
          <Image
            resizeMode="contain"
            source={icons.bell}
            style={{
              ...Style.iconDefault,
            }}
          />

          <View
            style={{
              ...Style.itemBadge,
            }}
          />
        </Pressable>
      </View>
    </View>
  );
};