import { Box, Typography } from '@mui/material'
import { styles } from './styles'
import type { BasemapOption } from './types'

export function Group({
  values,
  selected,
  onChange,
}: {
  values: Omit<BasemapOption, 'group'>[]
  selected: string | null | undefined
  onChange: (id: string) => void
}) {
  return (
    <Box sx={styles.group}>
      {values.map((option) => {
        const isSelected = option.id === selected
        return (
          <Box
            key={option.id}
            sx={styles.item.container}
            component='button'
            aria-label={option.label}
            onClick={() => onChange(option.id)}
          >
            <img
              src={option.icon}
              aria-label={option.label + ' icon'}
              data-active={isSelected}
            />
            <Typography
              variant='caption'
              sx={{ ...(isSelected && styles.item.selected) }}
            >
              {option.label}
            </Typography>
          </Box>
        )
      })}
    </Box>
  )
}