import { Component } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import { formatPrice, parsePriceInput } from '../../../utils/price';
import {
  TINT_PILL,
} from '../../../colors';

const tierPillSx = {
  height: 22,
  fontSize: 11,
  fontWeight: 600,
};

export default class TierPricePills extends Component {
  render() {
    const { tiers } = this.props;
    return (
      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, minHeight: 22 }}>
        {(tiers ?? []).map((tier) => {
          const gross = parsePriceInput(tier.gross);
          if (gross == null) return null;
          return (
            <Chip
              key={tier.minmultiplier}
              size="small"
              label={`ab ${tier.minmultiplier} · ${formatPrice(gross)}`}
              sx={{
                ...tierPillSx,
                bgcolor: TINT_PILL,
              }}
            />
          );
        })}
      </Box>
    );
  }
}