---
import { Button } from "@/components/ui/button"
import { Icon } from "@/components/ui/icon"
import { Image } from "@/components/ui/image"
import {
  Section,
  SectionActions,
  SectionContent,
  SectionMedia,
  SectionProse,
  SectionSplit,
} from "@/components/ui/section"

interface Props {
  class?: string
  id?: string
  list?: string[]
  links?: {
    icon?: string
    text?: string
    href?: string
    target?: string
  }[]
  image?: {
    src: string
    alt: string
  }
  item?: {
    images?: {
      src: string
      alt: string
    }[]
    rating?: number
    description?: string
  }
}

const { class: className, id, links, image } = Astro.props
---

<Section class={className} id={id} size="lg">
  <SectionSplit class="@5xl:grid-cols-[1fr_3fr] @5xl:items-center">
    <SectionContent>
      <SectionProse class="text-balance" size="lg">
        <slot />
      </SectionProse>
      <SectionActions>
        {
          links?.map(({ icon, text, ...link }, i) => (
            <Button
              variant={i === 0 ? "default" : "secondary"}
              size="lg"
              {...link}
            >
              {icon && <Icon name={icon} />}
              {text}
            </Button>
          ))
        }
      </SectionActions>
    </SectionContent>
    <SectionMedia
      class="-mr-(--section-px) rounded-r-none @5xl:-my-(--section-py)"
    >
      <Image
        sizes="(min-width: 1536px) 1152px, (min-width: 1024px) 75vw, 100vw"
        priority
        {...image}
      />
    </SectionMedia>
  </SectionSplit>
</Section>