---
import type { ComponentProps, HTMLTag } from 'astro/types'
import {
  Avatar,
  Card,
  Column,
  Heading,
  Icon,
  Image,
  Label,
  List,
  Price,
  Rating,
  Row,
  Text,
} from 'fulldev-ui'

type Props<As extends HTMLTag = 'a'> = ComponentProps<typeof Card<As>> & {
  level?: ComponentProps<typeof Heading>['level']
  ratio?: ComponentProps<typeof Image>['ratio']
  position?: ComponentProps<typeof Image>['position']
  image?: ComponentProps<typeof Image>['src']
  images?: ComponentProps<typeof Image>['src'][]
  label?: ComponentProps<typeof Heading>['html']
  heading?: ComponentProps<typeof Heading>['html']
  title?: ComponentProps<typeof Heading>['html']
  price?: ComponentProps<typeof Price>['value']
  icon?: ComponentProps<typeof Icon>['name']
  text?: ComponentProps<typeof Text>['html']
  description?: ComponentProps<typeof Text>['html']
  rating?: ComponentProps<typeof Rating>['value']
  avatars?: ComponentProps<typeof Avatar>['src'][]
  avatar?: ComponentProps<typeof Avatar>['src']
  list?: ComponentProps<typeof List>['items']
}

const {
  level = 4,
  compact = true,
  variant = 'base',
  frame = 'none',
  ratio = 'square',
  position = 'inset',
  image,
  images,
  avatar,
  avatars,
  rating,
  label,
  heading,
  title,
  icon,
  text,
  list,
  description,
  price,
  ...rest
} = Astro.props
---

<Card
  class:list={'master-card'}
  {frame}
  {variant}
  {...rest}
>
  <Image
    style={{ height: 'auto' }}
    src={image || images?.[0]}
    {ratio}
    {position}
  />
  <Icon
    color="brand"
    name={icon}
  />
  <Row>
    {
      [avatar, ...(avatars ?? [])]?.map((avatar) => (
        <Avatar
          radius="full"
          src={avatar}
        />
      ))
    }
    <Column>
      <Rating
        color="brand"
        value={rating}
      />
      <Label
        color="brand"
        html={label}
      />
    </Column>
  </Row>
  <Heading
    {level}
    html={heading ?? title}
  />
  <Text html={text ?? description} />
  <List items={list} />
</Card>