---
import type { ComponentProps, HTMLTag } from 'astro/types'
import { Badge, Card, Heading, Image, Price, Text, Wrap } 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']
  text?: ComponentProps<typeof Text>['html']
  description?: ComponentProps<typeof Text>['html']
  price?: ComponentProps<typeof Price>['value']
  badges?: ComponentProps<typeof Badge>['html'][]
}

const {
  level = 4,
  variant = 'base',
  frame = 'none',
  ratio,
  image,
  images,
  href,
  position,
  label,
  heading,
  description,
  badges,
  title,
  price,
  ...rest
} = Astro.props
---

<Card
  class:list={'product-card'}
  href={href}
  {frame}
  {variant}
  {...rest}
>
  <Image
    src={image || images?.[0]}
    {ratio}
    {position}
  />
  <Wrap>
    {
      badges?.map((badge) => (
        <Badge
          variant="soft"
          text={badge}
        />
      ))
    }
  </Wrap>
  <Heading
    html={title}
    level={3}
  />
  <Text html={description} />
</Card>