import { Box, Typography } from '@mui/material'
import { styles } from './styles'
import type { LegendIconVariable } from '../../stores'

export interface LegendIconUIProps {
  data: LegendIconVariable
}

/**
 * Icon legend — a list of icon images with labels (and optional values).
 *
 * @experimental This API is new and may change in a future release.
 */
export function LegendIconUI({ data }: LegendIconUIProps) {
  const orientation = data.orientation ?? 'vertical'
  const horizontal = orientation === 'horizontal'

  return (
    <Box
      data-orientation={orientation}
      sx={{ ...styles.list, ...(horizontal ? styles.listHorizontal : null) }}
    >
      {data.items.map((item, index) => (
        <Box
          key={`${item.label}-${index}`}
          sx={{
            ...styles.item,
            ...(horizontal ? styles.itemHorizontal : null),
          }}
        >
          <Box component='img' src={item.icon} alt='' sx={styles.icon} />
          <Typography
            variant='caption'
            color='text.primary'
            sx={{
              ...styles.label,
              ...(horizontal ? styles.labelHorizontal : null),
            }}
          >
            {item.label}
          </Typography>
          {item.value != null && (
            <Typography
              className='PsLegend-value'
              variant='caption'
              color='text.secondary'
              sx={styles.value}
            >
              {item.value}
            </Typography>
          )}
        </Box>
      ))}
    </Box>
  )
}