import { t } from "i18next";
import React from "react";
import { View } from "react-native";
import { Button } from "@/components/Button";
import { Text } from "@/components/common/Text";
import useRouter from "@/hooks/useAppRouter";
import { useSettings } from "@/utils/atoms/settings";

export interface ContinueWatchingOverlayProps {
  /** Invoked when the user confirms they want to keep watching. */
  onContinue: () => void;
}

const ContinueWatchingOverlay: React.FC<ContinueWatchingOverlayProps> = ({
  onContinue,
}) => {
  const { settings } = useSettings();
  const router = useRouter();

  return settings.autoPlayEpisodeCount >=
    settings.maxAutoPlayEpisodeCount.value ? (
    <View
      className={
        "absolute top-0 bottom-0 left-0 right-0 z-50 flex flex-col px-4 items-center justify-center bg-[#000000B3]"
      }
    >
      <Text className='text-2xl font-bold text-white py-4 '>
        Are you still watching ?
      </Text>
      <Button onPress={onContinue} color={"purple"} className='my-4 w-2/3'>
        {t("player.continue_watching")}
      </Button>

      <Button onPress={router.back} color={"transparent"} className='w-2/3'>
        {t("player.go_back")}
      </Button>
    </View>
  ) : null;
};

export default ContinueWatchingOverlay;