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

interface ContainerProps {
  num_rating: number;
  num_full_rating: number;
}

const QuestionProgress: React.FC<ContainerProps> = ({ num_rating = 0, num_full_rating = 2 }) => {
  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '0.5rem' }}>
        {Array.from({ length: num_rating }, (_, index) => (
          <IonButton shape='round' fill='outline' size='small' color='success'>
            <IonIcon slot='icon-only' icon={checkmarkOutline}></IonIcon>
          </IonButton>
        ))}
        {Array.from({ length: num_full_rating - num_rating }, (_, index) => (
          <IonButton shape='round' fill='outline' size='small' color='dark'>
            <IonIcon slot='icon-only' icon={checkmarkOutline}></IonIcon>
          </IonButton>
        ))}
      </div>
    </>
  );
};

export default QuestionProgress;
