import Image from "next/image";
import Button from "./ui/Button";

interface CtaSectionProps {
  title: string;
  description: string;
  buttonText?: string;
  buttonLink?: string;
  image?: string;
  className?: string;
  imageClassName?: string;
}

export default function CtaSection({
  title,
  description,
  buttonText = "Get Access Now",
  buttonLink = "#",
  image = "/images/cta-1.svg",
  className = "",
  imageClassName = "",
}: CtaSectionProps) {
  return (
    <section className={`pt-section pb-16 md:pb-20 lg:pb-24.5 ${className}`}>
      <div className="container-1655">
        <div
          className="
            gradient1
            relative overflow-hidden
            rounded-[28px]
            px-5 py-10
            shadow-[0_20px_80px_rgba(79,126,255,0.22)]
            sm:rounded-[36px] sm:py-12
            md:rounded-[44px] md:py-12
            lg:rounded-[60px]
            2xl:py-24
          "
        >
          <div className="container-k">
            <div className="grid items-center gap-8 md:gap-10 lg:grid-cols-2">
              <div className="relative z-10 mx-auto max-w-[540px] text-center lg:mx-0 lg:text-left">
                <h2
                  className="
                    font-heading text-3xl font-medium capitalize
                    leading-tight text-white
                    sm:text-4xl
                    md:text-4xl
                    lg:text-5xl lg:leading-14.5
                  "
                >
                  {title}
                </h2>

                <p className="mt-4 text-base leading-7 text-white sm:text-lg md:mt-5 md:text-xl">
                  {description}
                </p>

                <Button
                  variant="white"
                  href={buttonLink}
                  className="mt-6 justify-center lg:mt-10"
                >
                  {buttonText}
                </Button>
              </div>

              <div
                className={`
                  relative z-10 mx-auto hidden h-full w-full
                  max-w-130 justify-center
                  lg:absolute lg:right-0 lg:top-1/2
                  lg:block lg:max-w-xl lg:-translate-y-1/2
                  2xl:max-w-3xl
                  ${imageClassName}
                `}
              >
                <Image
                  src={image}
                  width={780}
                  height={520}
                  alt={title}
                  className="
                    h-auto w-full object-contain
                    max-h-70
                    sm:max-h-85
                    md:max-h-105
                    lg:max-h-none lg:object-cover
                  "
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}