import { Button, Typography } from "antd";
import BackIcon from "components/Icons/BackIcon";
import { FunctionComponent, ReactNode } from "react";
import { useNavigate } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import { ProBlack2 } from "ThemeConstants";
import ProTitle from "../ProTitle";
const { Text } = Typography;

interface ProHeaderProps {
  children?: ReactNode;
  isReactNode?: boolean;
  navigateBack?: boolean;
  customRoute?: string;
}

const ProHeader: FunctionComponent<ProHeaderProps> = ({
  children,
  isReactNode,
  customRoute,
  ...other
}) => {
  const { themeName } = useAppSelector((state) => state.theme);
  const { isRTL } = useAppSelector((state) => state.locale);
  const router = useNavigate();

  const handleBack = () => {
    if (customRoute) {
      router(customRoute);
    } else {
      router(-1);
    }
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: isRTL ? "row-reverse" : "row",
        justifyContent: "space-between",
        alignItems: "center", // This centers vertically
        backgroundColor: themeName === "light" ? "white" : ProBlack2,
        height: "8vh", // Set a fixed height for the container
        padding: "4px 16px 0px 16px", // Add some horizontal padding
      }}
    >
      <Button
        type="text"
        icon={<BackIcon />}
        style={{
          flex: 0, // Don't allow this to grow
          marginRight: "auto", // Push it to the start
        }}
        onClick={handleBack}
      />

      {!isReactNode ? (
        <>
          <div
            style={{
              position: "absolute", // Absolute positioning
              left: "50%", // Center horizontally
              transform: "translateX(-50%)", // Adjust for exact center
              marginTop: 10,
              boxSizing: "border-box", // Explicit box model definition
            }}
          >
            <Text
              style={{
                textAlign: "center",
              }}
              {...other}
            >
              <ProTitle level={5}>{children}</ProTitle>
            </Text>
          </div>

          <div
            style={{
              position: "absolute", // Absolute positioning
              left: "50%", // Center horizontally
              transform: "translateX(-50%)", // Adjust for exact center
              marginTop: 10,
              boxSizing: "border-box", // Explicit box model definition
            }}
          >
            <Text
              style={{
                textAlign: "center",
              }}
              {...other}
            >
              <ProTitle level={5}>{children}</ProTitle>
            </Text>
          </div>
        </>
      ) : (
        children
      )}
    </div>
  );
};

export default ProHeader;
