---
import type { Props } from "@astrojs/starlight/props";
const { data } = Astro.locals.starlightRoute.entry;
const { title = data.title, tagline, image, actions = [] } = data.hero || {};

import { LinkButton } from "@astrojs/starlight/components";
---

<div
  class="flex w-full flex-col justify-center gap-1 px-3 py-4 text-center md:p-6"
>
  <div class="flex flex-col gap-6">
    <h1
      class="font-bold text-4xl md:text-6xl"
      data-page-title
      set:html={title}
    />
    {
      tagline && (
        <h2
          class="mx-auto font-normal max-w-md text-lg text-muted-foreground md:max-w-xl md:text-xl"
          set:html={tagline}
        />
      )
    }
  </div>
  <div class="my-4 grid gap-2 sm:grid-cols-2">

    <div class="text-center sm:block sm:text-left">
		{
			actions.length > 0 && (
				<div class="sl-flex actions">
					{actions.map(
						({ attrs: { class: className, ...attrs } = {}, icon, link: href, text, variant }) => (
							<LinkButton {href} {variant} icon={icon?.name} class:list={[className]} {...attrs}>
								{text}
								{icon?.html && <Fragment set:html={icon.html} />}
							</LinkButton>
						)
					)}
				</div>
			)
		}
    </div>
  </div>
</div>