import React, { ReactNode } from 'react';
import { Picture } from '../../../model/rings';

interface QuestionItemProps {
  number?: number;
  title: string;
  points: number;
  image: Picture;
  children: ReactNode;
}

const QuestionItem: React.FC<QuestionItemProps> = ({
  number,
  title,
  points,
  image,
  children,
}) => {
  const { thumbnail, small, medium } = image.formats;
  return (
    <div className="questionItem">
      <div className="questionItemWrapper">
        <div className="content left">
          <div className="contentWrapper">
            {number ? <p className="number">{number}.</p> : null}
            <h2>{title}</h2>
            <p className="points">
              {points}
              <span>pto{points !== 1 ? 's' : ''}</span>
            </p>
          </div>
          <div className="imageWrapper">
            <img
              alt={title}
              src={medium?.url || small?.url || thumbnail?.url}
            />
          </div>
        </div>
        <div className="content right">{children}</div>
      </div>
    </div>
  );
};

export default QuestionItem;