<!-- ---
import type { ComponentProps,HTMLTag } from 'astro/types'
import { Gallery } from 'fulldev-blocks'
import {
Button,
Column,
Heading,
Image,
Price,
Section,
Select,
Text,
} from 'fulldev-ui'

type Props<As extends HTMLTag = 'section'> = ComponentProps<
  typeof Section<As>
> & {
  level?: ComponentProps<typeof Heading>['level']
  position?: ComponentProps<typeof Image>['position']
  heading?: ComponentProps<typeof Heading>['html']
  title?: ComponentProps<typeof Heading>['html']
  text?: ComponentProps<typeof Text>['html']
  description?: ComponentProps<typeof Text>['html']
  price?: ComponentProps<typeof Price>['value']
  image?: ComponentProps<typeof Image>['src']
  images?: ComponentProps<typeof Image>['src'][]
  form?: any
  button?: any
  variations?: any
}

const {
  level = 1,
  structure = 'split',
  heading,
  title,
  text,
  description,
  price,
  image,
  images,
  variations,
  button,
  form,
  ...rest
} = Astro.props
---

<Section
  class:list={'product-section'}
  {structure}
  {...rest}
>
  <Gallery {images} />
  <Column style={{ position: 'sticky', top: 'var(--space-7)' }}>
    <Heading
      {level}
      html={heading || title}
    />
    <Text
      style={{ maxWidth: '420px' }}
      html={text || description}
    />
    <Price value={price} />
    {
      variations?.map(({ name, options }: any) => (
        <Select
          style={{ maxWidth: '400px' }}
          options={options}
          name={name}
          label={name}
          variant="outline"
        />
      ))
    }
    <Button
      style={{ marginTop: 'var(--space-3)', width: '100%', maxWidth: '400px' }}
      variant="soft"
      text="Toevoegen aan winkelwagen"
      type="button"
      as="button"
      variant="solid"
      color="brand"
      {...button}
    />
  </Column>
</Section> -->
