---
import WidgetWrapper from "./WidgetWrapper.astro";
import { Image } from "astro:assets";
import Headline from "@/components/ui/Headline.astro";
import type { ContentProps } from "@/types/types";

const {
  title,
  subtitle,
  tagline,
  description = [],
  image,
  imageAlt = "",
  id,
  isDark = false,
  classes = {},
  bg = await Astro.slots.render("bg"),
} = Astro.props as ContentProps;

const { container: containerClassProp = "", ...otherClasses } = classes;
---

<WidgetWrapper
  id={id}
  isDark={isDark}
  containerClass={`max-w-4xl mx-auto px-4 ${containerClassProp}`}
  bg={bg}
  classes={otherClasses}
>
  <div class="text-center">
    <Headline
      title={title}
      subtitle={subtitle ||
        (Array.isArray(description) ? description.join(" ") : description)}
      tagline={tagline}
      classes={{
        container: "mb-8",
        title: "text-4xl md:text-6xl font-bold mb-2",
        subtitle: "text-lg text-muted-foreground",
      }}
    />
    {
      image && (
        <Image
          src={image}
          alt={imageAlt}
          class="rounded-3xl shadow-2xl mx-auto mt-6 border border-border/50 aspect-video object-cover"
        />
      )
    }
    <slot />
  </div>
</WidgetWrapper>
