import React from 'react'
import {Box, Stack, useTheme} from "@mui/material";
import StarCoinModal from "./modals/star-coin";
import {getCDNUrl} from "../helpers/cdn";
import {useModal} from "mui-modal-provider";
import {ProfileInterface} from "../interfaces";

export interface AccountProps {
    profile: ProfileInterface,
    onAvatarClick: any
}

export const Account = ({profile, onAvatarClick}: AccountProps) => {
    const theme = useTheme()
    const isDark = theme.palette.mode === 'dark'

    const {showModal} = useModal()

    return  <Stack
        direction={'row'}
        sx={{
            border: !isDark ? '1px solid #e0e0e0' : '1px solid #686868',
            borderRadius: '38px',
            pl: 2,
        }}
    >
        <Stack
            direction={'row'}
            alignItems={'center'}
            sx={{cursor: 'pointer'}}
            onClick={() => showModal(StarCoinModal)}
        >
            <img src={getCDNUrl('app/star.png')} width={26} height={26} alt={'star-coin'} />
            <Box mr={2} ml={1}>
                {profile?.star_coin}
            </Box>
        </Stack>
        <img src={profile?.profile_url} alt="avatar" width={32} height={32} style={{borderRadius: '32px', cursor: 'pointer'}} onClick={onAvatarClick} />
    </Stack>
}