'use client'

// Next Imports

// MUI Imports
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'

// Third-party Imports
import classnames from 'classnames'
import CustomAvatar, { CustomAvatarProps } from '../../../@core/components/mui/Avatar'
import { ThemeColor } from '../../../@core/types'
import { Skeleton, Typography } from '@mui/material'
import { formatShortCurrency } from '../../../utils/transform'

type Props = {
  title: string
  value: number
  isCurrency: boolean
  isLoading: boolean
  avatarIcon: string
  avatarSkin?: CustomAvatarProps['skin']
  avatarSize?: number
  avatarColor?: ThemeColor
}

const DistributedBarChartOrder = ({
  title,
  value,
  isCurrency = false,
  isLoading,
  avatarIcon,
  avatarSkin,
  avatarColor
}: Props) => {
  if (isLoading) {
    return <Skeleton sx={{ bgcolor: 'grey.100' }} variant='rectangular' width={300} height={118} />
  }

  return (
    <Card>
      <CardContent>
        <div className='flex items-start justify-between'>
          <div className='flex-1'>
            <Typography variant='h6' color='text.disabled'>
              {title}
            </Typography>
            <Typography color='text.primary' variant='h4'>
              {isCurrency ? 'Rp ' + formatShortCurrency(value) : formatShortCurrency(value)}
            </Typography>
          </div>
          <CustomAvatar variant='rounded' skin={avatarSkin} size={52} color={avatarColor}>
            <i className={classnames(avatarIcon, 'text-[28px]')} />
          </CustomAvatar>
        </div>
      </CardContent>
    </Card>
  )
}

export default DistributedBarChartOrder