import React, { ReactElement } from 'react'
import { Sync, ShoppingCartOutlined } from '@mui/icons-material'
import { DataSource } from '../../common/enums'

interface Props {
    dataSource: string
    fontSize?: 'small' | 'medium' | 'large'
    sx?: object
}

const DataSourceIcon = (props: Props): ReactElement => {
    const {
        dataSource,
        fontSize = 'small',
        sx = { color: 'text.secondary', marginLeft: '5px', marginRight: '-6px' },
    } = props

    switch (dataSource) {
        case DataSource.Erp:
        case DataSource.System:
            return <Sync titleAccess={dataSource} fontSize={fontSize} sx={sx} />
        case DataSource.Shop:
        default:
            return <ShoppingCartOutlined titleAccess={dataSource} fontSize={fontSize} sx={sx} />
    }
}

export default DataSourceIcon