class Avatar extends Shadow {
    constructor(person, size) {
        super()
        this.person = person
        this.size = size
    }

    render() {
        const { person, size } = this
        if (person.image_path) {
            img(`${config.SERVER}${person.image_path}`, `${size}em`, `${size}em`)
                .borderRadius(50, pct)
                .objectFit("cover")
                .flexShrink(0)
        } else {
            const initials = [person.first_name?.[0], person.last_name?.[0]].filter(Boolean).join("").toUpperCase()
            VStack(() => {
                p(initials)
                    .margin(0).fontSize(size * 0.35, em).fontWeight("700")
                    .color("white").lineHeight("1")
            })
            .width(size, em).height(size, em).borderRadius(50, pct)
            .background(this.avatarColor(`${person.first_name} ${person.last_name}`))
            .justifyContent("center").alignItems("center").flexShrink(0)
        }
    }

    avatarColor(name) {
        const colors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16"]
        let hash = 0
        for (let i = 0; i < (name || "").length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash)
        return colors[Math.abs(hash) % colors.length]
    }
}

register(Avatar)