import { Button, Tooltip } from '@mui/material';
import React, { useState } from 'react';

type Props = {
  index: number;
  defaultValue: number;
  onUpdate: (data: any) => void;
  disabled?: boolean;
};

const Rating = ({index, defaultValue, onUpdate, disabled} : Props) => {
  return (
    <div key={index} className='rating-div'>
      {[...Array(10)].map((star, ind) => {
        return (
          <Tooltip title={(ind+1) < 3 ? 'No Pain' : (ind+1) > 7 ? 'Unbearable' : ''} placement="top-end">
            <Button
              className={`btn btn-scale btn-scale-asc-${ind+1} ${(ind+1) === defaultValue ? 'selected' : ''}`}
              key={ind + 1}
              onClick={() => onUpdate({ index: index, severity: ind + 1 })}
              disabled={disabled}
            >
              {ind + 1}
            </Button>
          </Tooltip>
        );
      })}
    </div>
  );
};

export default Rating;