---
import Markdown from "../../islands/Markdown.jsx";

const { section, index } = Astro.props;

const hasImage = !!section.image;
const reverse = index % 2 === 1;
---
<section class="fuz-section">
  <div class={`fuz-section-grid ${hasImage ? "md:grid-cols-2" : "md:grid-cols-1"}`}>

    {hasImage && (
      <img
        src={section.image}
        alt={section.title}
        class={`fuz-section-image ${reverse ? "md:order-1" : "md:order-2"} 
        ${section.dimmed ? "fuz-image-dimmed" : ""}`}
      />
    )}

    <div class={`fuz-section text-center ${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}>
      <h2 class="fuz-section-title ">{section.title}</h2>

      <Markdown text={section.content} />

      {section.button && (
        <div class="mt-8 flex justify-center">
          <a href={section.button.url} class="btn btn-outline">
            {section.button.text}
          </a>
        </div>
      )}
    </div>

  </div>
</section>
