import * as React from "react";
import { View } from "react-native";
import { VideoPremiumBlockerContainer } from "./styled";
import { useSiteSettings, SiteSettings } from "../../providers/site";
import PremiumLabel from "./premium-label";
import Typography from "../ui/typography";
import Button from "../ui/button";
import { SiteImage } from "../site-image";

type VideoPremiumBlocker = {
  text: string;
  onPress: () => void;
};
//<PremiumLabel />
function VideoPremiumBlocker({ text, onPress }: VideoPremiumBlocker) {
  const { renderers } = useSiteSettings() as any;
  //console.log(JSON.stringify(data?.renderers));
  return (
    <>
      <SiteImage
        resizeMode="cover"
        src={renderers.subscription_settings.default_background}
        style={{
          width: "100%",
          height: "100%",
          position: "absolute",
        }}
        fit
      />
      <VideoPremiumBlockerContainer>
        <Typography
          style={{ paddingVertical: 20 }}
          color={"white"}
          variant="title4"
        >
          {text}
        </Typography>
        <Button
          style={{ maxWidth: 215 }}
          variant="filled"
          label={"SUBSCRIBE NOW"}
          onPress={onPress}
        />
      </VideoPremiumBlockerContainer>
    </>
  );
}

export default VideoPremiumBlocker;