'use client'

import { ComponentType } from 'react'

import { Avatar, AvatarTypeMap } from '@mui/material'
import { OverridableComponent } from '@mui/material/OverridableComponent'
import { styled } from '@mui/material/styles'

import { AvatarWithPlaceholderProps } from './types'

export const AvatarStyled: ComponentType<AvatarWithPlaceholderProps> = styled(
  Avatar,
)<AvatarWithPlaceholderProps>(({ theme, width, height, borderStyle, borderWidth }) => ({
  width,
  height,
  border: `${borderStyle} ${borderWidth} ${theme.palette.background.default}`,
  backgroundColor: theme.palette.grey[300],
})) as OverridableComponent<AvatarTypeMap<AvatarWithPlaceholderProps, 'div'>>