---
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
import GoLinkSecondaryButton from '@components/buttons/GoLinkSecondaryButton.astro';
import Image from '@components/ui/images/Image.astro';

interface Props {
  title: string;
  subTitle?: string;
  primaryBtn?: string;
  primaryBtnURL?: string;
  secondaryBtn?: string;
  secondaryBtnURL?: string;
  src?: any;
  alt?: string;
  rounded?: boolean;
}

const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, src, alt } = Astro.props;

const roundedClasses = Astro.props.rounded ? "rounded-2xl" : null;
---

<section class="mx-auto grid max-w-340 gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full">
  <div>
    <h1 class="smooth-reveal card-text-header block lg:text-7xl">
      <Fragment set:html={title} />
    </h1>
    {subTitle && (
    <p class="smooth-reveal card-text-header-description lg:w-4/5 mt-6">
      {subTitle}
    </p>
    )}
    <div class="smooth-reveal grid sm:inline-flex mt-7 w-full gap-3">
      {primaryBtn && <GoLinkPrimaryButton title={primaryBtn} url={primaryBtnURL} />}
      {secondaryBtn && <GoLinkSecondaryButton title={secondaryBtn} url={secondaryBtnURL} />}
    </div>
  </div>

  <div class="smooth-reveal-fade md:block w-full hidden">
    <div class="flex justify-center w-full top-12 md:ml-4 overflow-hidden">
      {src && alt && (
      <Image
        src={src}
        alt={alt}
        class={`h-full w-105 scale-100 object-cover object-center ${roundedClasses}`}
        draggable="false"
        loading="eager"
        format="webp"
        quality="low"
        widths={[840]}
        disableBlur={true}
      />
      )}
    </div>
  </div>
</section>