---
import type { HTMLTag } from 'astro/types'
import { Box, Heading, Label, Section, Text } from 'fulldev-ui'
import type { Block } from '../schemas/block'
import ReviewCard from './ReviewCard.astro'

type Props<As extends HTMLTag = 'section'> = Block<As> & {
  cards?: any
  card?: any
  label?: string
}

const {
  structure = 'masonry',
  variant,
  frame,
  heading,
  text,
  cards,
  card,
  label,
  ...rest
} = Astro.props
---

<Section
  class:list={'reviews'}
  {...rest}
>
  <Label
    color="brand"
    html={label}
  />
  <Heading html={heading} />
  <Text html={text} />
  <Box {structure}>
    {
      cards?.map((c) => (
        <ReviewCard
          {variant}
          {frame}
          {...card}
          {...c}
        />
      ))
    }
  </Box>
</Section>