---
import WidgetWrapper from "./WidgetWrapper.astro";
import type { HeroProps } from "@/types/types";
import Headline from "@/components/ui/Headline.astro";
import Button from "@/components/ui/Button.astro";
import { Icon } from "astro-icon/components";
import { toR2Url } from "@/utils/r2";
import Picture from "@/components/ui/Picture.astro";

const {
  title = await Astro.slots.render("title"),
  tagline,
  description = await Astro.slots.render("description"),
  actions = [],
  id,
  isDark = false,
  classes = {},
  bg = await Astro.slots.render("bg"),
  animate = false,
  bgImage,
} = Astro.props as HeroProps;

const { container: containerClassProp = "" } = classes;
const heroImage = toR2Url(bgImage);
---

<WidgetWrapper
  id={id}
  isDark={isDark}
  containerClass={`min-h-[60vh] flex flex-col justify-center ${containerClassProp}`}
  bg={bg}
  animate={animate}
>
  {
    heroImage && (
      <Fragment slot="bg">
        <Picture
          src={heroImage}
          alt=""
          fetchpriority="high"
          class="absolute inset-0 h-full w-full object-cover"
        />
        <div class="absolute inset-0 bg-black/55" aria-hidden="true" />
      </Fragment>
    )
  }
  <div class:list={["text-center", { "relative z-10": heroImage }]}>
    {
      tagline && (
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-semibold mb-6">
          <span class="relative flex h-2 w-2" aria-hidden="true">
            <span class="absolute inline-flex h-full w-full rounded-full bg-primary/60 opacity-75 animate-ping motion-reduce:animate-none" />
            <span class="relative inline-flex h-2 w-2 rounded-full bg-primary" />
          </span>
          {tagline}
        </div>
      )
    }
    {
      (title || description) && (
        <Headline
          title={title}
          subtitle={description}
          titleAs="h1"
          classes={{
            container: "mb-0 max-w-none",
            title: `text-5xl md:text-7xl font-extrabold tracking-tight mb-6 ${heroImage ? "text-white" : "text-foreground"}`,
            subtitle: `max-w-2xl mx-auto text-xl mb-10 ${heroImage ? "text-white/80" : "text-muted-foreground"}`,
          }}
        />
      )
    }

    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
      {
        Array.isArray(actions) &&
          actions.length > 0 &&
          actions.map((action) => (
            <Button
              href={action.href}
              variant={action.variant as "primary" | "secondary"}
              size="lg"
              aria-label={action.ariaLabel}
              class="w-full sm:w-auto"
            >
              {action.icon && (
                <Icon name={action.icon} class="w-5 h-5 mr-2 -ml-1" />
              )}
              {action.text}
            </Button>
          ))
      }
    </div>
  </div>
  <slot />
</WidgetWrapper>
