import { IonIcon } from '@ionic/react';
import './style.css';
import { star, starOutline } from 'ionicons/icons';

interface ContainerProps {
  num_rating: number;
  max_rating?: number;
}

const MarkRating: React.FC<ContainerProps> = ({ num_rating, max_rating = 3 }) => {
  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '0.5rem' }}>
        {Array.from({ length: max_rating }, (_, index) => {
          if (index < num_rating) {
            return (
              <div style={{ width: '10vw', height: '10vw' }}>
                <IonIcon size='large' color='warning' icon={star}></IonIcon>
              </div>
            );
          } else {
            return (
              <div style={{ width: '10vw', height: '10vw' }}>
                <IonIcon size='large' color='warning' style={{ opacity: '0.3' }} icon={starOutline}></IonIcon>
              </div>
            );
          }
        })}
      </div>
    </>
  );
};

export default MarkRating;
