import React, { ReactNode, useState } from 'react'
import {
  StyledAvatarCardItem,
  WrapperStyledAvatarGroup
} from './ProductAvatar.theme'
import { IProductAvatar, IProductAvatarGroup } from './ProductAvatar.interface'

export const ProductAvatarGroup = ({
  children,
  style
}: IProductAvatarGroup) => {
  const [] = useState()
  return (
    <WrapperStyledAvatarGroup style={style}>
      {children}
    </WrapperStyledAvatarGroup>
  )
}

export const ProductAvatarItem = ({
  picture,
  title,
  onClick,
  selected
}: IProductAvatar) => {
  const imageSrc = picture || '/assets/placeholder.png'

  return (
    <StyledAvatarCardItem selected={selected} onClick={onClick}>
      <img src={imageSrc} alt={title} />
    </StyledAvatarCardItem>
  )
}