import React from 'react';
import { Box, Typography, Rating } from '@mui/material';

/**
 * Component to display product rating in a compact format
 */
const ProductRatingDisplay = ({ rating, reviewCount, showEmpty = false }) => {
  if (!rating && !reviewCount && !showEmpty) {
    return null;
  }

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', my: 1 }}>
      <Rating 
        value={rating || 0} 
        readOnly 
        precision={0.5}
        size="small"
      />
      <Typography variant="body2" color="text.secondary" sx={{ ml: 0.5 }}>
        {reviewCount ? `(${reviewCount})` : showEmpty ? '(0)' : ''}
      </Typography>
    </Box>
  );
};

export default ProductRatingDisplay;