import { ActionButton } from "@/components/ui/ActionButton/ActionButton";
import Typography, {
  TypographyProps,
} from "@/components/ui/Typography/Typography";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import Image from "next/image";

interface UnlockYourSketchProps
  extends Omit<React.ComponentProps<"div">, "title"> {
  title?: TypographyProps<"h3">;
  subtitle?: TypographyProps<"p">;
  button?: React.ComponentProps<typeof Button>;
  image?: React.ComponentProps<typeof Image>;
  blur?: React.ComponentProps<"div"> & {
    text?: TypographyProps<"p">;
    icon?: React.ReactNode;
  };
}

export default function UnlockYourSketch({
  title,
  subtitle: description,
  button,
  image,
  blur,
  ...props
}: UnlockYourSketchProps) {
  return (
    <div
      {...props}
      className={cn("w-full mt-5 flex flex-col items-center", props.className)}
    >
      {title && (
        <Typography
          as="h3"
          weight="bold"
          align="center"
          font="inter"
          {...title}
          className={cn(
            "text-[30px] leading-[36px] text-trial-payment-foreground",
            title.className
          )}
        />
      )}
      {description && (
        <Typography
          as="p"
          align="center"
          font="inter"
          weight="semiBold"
          size="xl"
          {...description}
          className={cn(
            "mt-1 leading-[28px] text-[#1047A2]",
            description.className
          )}
        />
      )}
      <div className="w-full max-w-[356px] relative">
        {image && (
          <Image
            width={356}
            height={248}
            {...image}
            src={image.src}
            alt={image.alt}
            className={cn(
              "mt-6 rounded-[12px] border border-trial-payment-border-secondary",
              image.className
            )}
          />
        )}
        {blur && (
          <div
            className={cn(
              "absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]",
              "p-8 pb-[50px]",
              "bg-[#F8FAFC8F]",
              "backdrop-blur-sm",
              "rounded-[16px]",
              "flex flex-col items-center justify-center gap-2",
              "w-[calc(100%-120px)] min-w-[235px]",
              "shadow-[0px_4px_4px_0px_#00000040]"
            )}
          >
            {blur?.icon}
            {blur.text && (
              <Typography
                as="p"
                weight="semiBold"
                align="center"
                className="text-[#A16207]"
                {...blur.text}
              />
            )}
          </div>
        )}
      </div>
      {button && (
        <ActionButton
          {...button}
          className={cn(
            "mt-4 text-[18px]/[22px] font-medium rounded-[16px] animate-scale-pulse",
            button.className
          )}
        />
      )}
    </div>
  );
}
