---
import BaseLayout from "@components/base/BaseLayout.astro";
import { markdownify } from "@lib/textConverter";
import Button from "@components/common/Button.astro";
import type { HomeEntry } from "@/types";
import { Image } from "astro:assets";

interface Props {
  entry: HomeEntry;
}

const { entry } = Astro.props;
const { image, imageAlt, title, content, button } = entry.data;
---

<BaseLayout>
  <!-- Banner -->
  <section class="section">
    <div class="container">
      <div class="row justify-center">
        <div class="text-center lg:col-6">
          {
            image && (
              <div class="blur-[0px]">
                <Image
                class="mb-6 w-64"
                src={image}
                alt={imageAlt}
                width={1024}
                height={1024}
                loading="eager"
              />
              </div>
              
            )
          }
          <h1 set:html={markdownify(title)} class="mb-4" />
          <p set:html={markdownify(content)} class="mb-8" />
          {
            button && (
              <Button
                label={button.label}
                link={button.link}
                newtab
                hoverInvert
                color=""
              />
            )
          }
        </div>
      </div>
    </div>
  </section>
</BaseLayout>
