---
import type { ComponentProps, HTMLTag } from 'astro/types'
import {
  Badge,
  Box,
  Button,
  Column,
  Heading,
  Image,
  Label,
  Rating,
  Section,
  Text,
  Wrap,
} from 'fulldev-ui'
import JobCard from './JobCard.astro'

type Props<As extends HTMLTag = 'section'> = Omit<
  ComponentProps<typeof Section<As>>,
  'structure'
> & {
  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']
  badge?: ComponentProps<typeof Badge>['html']
  label?: ComponentProps<typeof Label>['html']
  image?: ComponentProps<typeof Image>['src']
  rating?: ComponentProps<typeof Rating>['value']
  buttons?: ComponentProps<typeof Button>[]
  structure?: ComponentProps<typeof Box>['structure']
  cards?: any
  pages?: any
  name?: any
  records?: any
}

const {
  level,
  structure,
  align,
  position,
  label,
  heading,
  badge,
  text,
  buttons,
  image,
  rating,
  cards,
  pages,
  records,
  title,
  name,
  ...rest
} = Astro.props
---

<Section
  class:list={'master-section'}
  structure={structure === 'split' ? 'split' : 'column'}
  {align}
  {...rest}
>
  <Box
    structure={structure === 'spread' ? 'spread' : 'column'}
    align={structure === 'split' ? 'start' : align}
  >
    <Column align={structure === 'column' ? align : 'start'}>
      <Rating value={rating} />
      <Badge html={badge} />
      <Label
        color="brand"
        html={label}
      />
      <Heading
        {level}
        html={heading || title || name}
      />
      <Text
        contrast={position === 'background' && true}
        html={text}
      />
    </Column>
    <Wrap>
      {buttons?.map((button) => <Button {...button} />)}
    </Wrap>
  </Box>
  <Box
    size="lg"
    structure={structure === 'split' ? 'grid' : structure || 'grid'}
    position={structure === 'carousel' ? 'inset' : undefined}
  >
    {
      [...(cards ?? []), ...(records ?? []), ...(pages ?? [])]?.map(
        (card: any) => (
          <JobCard
            frame="panel"
            position="cover"
            ratio={'square'}
            {...card}
          />
        )
      )
    }
  </Box>
  <Image
    {position}
    src={image}
  />
</Section>

<slot name="script" />
<slot name="style" />
<slot />