---
import type { AvatarProps } from './avatar'

import Image from '../Image/Image.astro'

import styles from './avatar.module.scss'

export type Props = AvatarProps

const {
    img,
    alt = 'Avatar',
    size = 40,
    lazy = true,
    borderColor,
    borderless,
    reverse,
    className,
    groupClassName
} = Astro.props

const classes = [
    styles.avatar,
    borderless && styles.borderless,
    className
]

const groupClasses = [
    styles.group,
    reverse && styles.reverse,
    groupClassName
]
---

{Array.isArray(img) ? (
    <div class:list={groupClasses}
        style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
    >
        {img.map((img, index) => (
            <Image
                src={img}
                alt={Array.isArray(alt) ? alt[index] : alt}
                width={Array.isArray(size) ? size[index] : size}
                height={Array.isArray(size) ? size[index] : size}
                loading={lazy ? 'lazy' : null}
                class:list={classes}
                style={Array.isArray(size) ? `--w-avatar-index: ${size[index]}` : null}
            />
        ))}
    </div>
) : (
    <Image
        src={img}
        alt={Array.isArray(alt) ? alt[0] : alt}
        width={Array.isArray(size) ? size[0] : size}
        height={Array.isArray(size) ? size[0] : size}
        class:list={classes}
        loading={lazy ? 'lazy' : null}
        style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
    />
)}