import Slider from '@mui/material/Slider';
import IconButton from '@mui/material/IconButton';

import deleteIcon from '../../Assets/delete.png';
import Rating from './Rating';

type Props = {
  entry: any;
  index: number;
  onUpdate: (data: any) => void;
  onDelete: (index: number) => void;
};

const Entry = ({ entry, onUpdate, onDelete, index }: Props) => {
  return (
    <div className='entry'>
      <span className='image-marker__marker--default'>{index + 1}</span>
      <Rating index={entry.index} defaultValue={entry.severity} onUpdate={onUpdate}/>
      <IconButton aria-label='delete' onClick={() => onDelete(index)}>
        <img src={deleteIcon} height='25' width='25' />
      </IconButton>
    </div>
  );
};

export default Entry;