'use client'

import { getGenderFallbackAvatar } from '@/lib/characterCreation'

type SkinAvatarProps = {
  src: string
  alt: string
  gender?: 'male' | 'female'
  className?: string
  imageClassName?: string
}

export default function SkinAvatar({
  src,
  alt,
  gender,
  className = '',
  imageClassName = '',
}: SkinAvatarProps) {
  const isSkinId = src.includes('/SkinsID/')

  return (
    <div className={`overflow-hidden shrink-0 ${className}`}>
      <img
        src={src}
        alt={alt}
        className={
          isSkinId
            ? `h-full w-full object-cover object-[center_12%] scale-[2.35] origin-top ${imageClassName}`
            : `h-full w-full object-cover object-center ${imageClassName}`
        }
        onError={(event) => {
          if (!gender) return
          const target = event.currentTarget
          target.src = getGenderFallbackAvatar(gender)
          target.className = `h-full w-full object-cover object-center ${imageClassName}`
        }}
      />
    </div>
  )
}