import { styled, alpha } from '@mui/material'
import type { SystemPalette } from '@/configs/config'

const ColorContainer = styled('div')(({ theme }) => ({
  display: 'flex',
  flexWrap: 'nowrap',
  width: '100%',
  justifyContent: 'space-around',
  height: '36px',
  padding: '6px',
  borderRadius: '6px',
  background: alpha(theme.palette.yacolor.bg[theme.palette.mode], 0.8),
}))

const ColorItem = styled('div')<{ bgc: string }>(({ bgc }) => {
  return {
    backgroundColor: bgc,
    width: '36px',
    height: '36px',
  }
})

const ColorBar: React.FC<{ pale: SystemPalette }> = (props) => {
  const { pale } = props
  return (
    <ColorContainer>
      {pale.primary && pale.primary.main && (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <ColorItem bgc={pale.primary.main} />
          <span style={{ fontSize: '12px', fontWeight: 'bold', paddingLeft: '.5rem' }}>
            {pale.primary.main}
          </span>
        </div>
      )}
      {pale.secondary && pale.secondary.main && (
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <ColorItem bgc={pale.secondary.main} />
          <span style={{ fontSize: '12px', fontWeight: 'bold', paddingLeft: '.5rem' }}>
            {pale.secondary.main}
          </span>
        </div>
      )}
    </ColorContainer>
  )
}

export default ColorBar