import { Constants } from "core/utils/utils";
import styles from "./styles.module.css";
import { useSelector } from "react-redux";
import { bannerUrl } from "core/reducers/appSlice";

export default function MyBanner({
  title,
  subtitle,
  headerBar,
}: {
  title: string;
  subtitle?: string;
  headerBar?: React.ReactNode;
}) {
  const appBannerUrl = useSelector(bannerUrl);

  return (
    <div
      style={{
        position: "relative",
      }}
    >
      {appBannerUrl !== null ? (
        <img
          src={`${Constants.STATIC_CONTENT_ADDRESS}${
            appBannerUrl || Constants.DEMO_BANNER_URL
          }`}
          alt="banner"
          style={{
            height: 228,
            width: "100%",
            objectFit: "cover",
            userSelect: "none",
          }}
        />
      ) : (
        <div
          style={{
            height: 228,
            backgroundColor: "#000",
          }}
        />
      )}

      <div className={styles.gradientContainer}></div>

      <div
        style={{
          position: "absolute",
          top: 0,
          zIndex: 1,
          width: "100%",
          height: 228,
        }}
      >
        {headerBar}

        <div
          style={{
            position: "absolute",
            paddingLeft: 24,
            paddingRight: 24,
            bottom: 24,
            width: "100%",
          }}
        >
          {subtitle && (
            <div style={{ fontSize: 12, color: "#A4A4A4" }}>{subtitle}</div>
          )}
          <div style={{ fontWeight: "bold", fontSize: 36, color: "#fff" }}>
            {title}
          </div>

          <div
            style={{
              width: "100%",
              height: 2,
              marginTop: 16,
              background: "rgba(253, 253, 253, 0.3)",
            }}
          />
        </div>
      </div>
    </div>
  );
}