import React, { ReactElement } from 'react';
import { Phases } from '../../../model/common';

interface PhaseItemProps {
  onClick: () => void;
  icon: ReactElement;
  title: Phases;
  currentPhaseNumber: number;
  phaseNumber: number;
  disabled?: boolean;
  points?: number;
  selected: boolean;
}

const PhaseItem: React.FC<PhaseItemProps> = ({
  onClick,
  icon,
  title,
  currentPhaseNumber,
  phaseNumber,
  disabled,
  points,
  selected,
}) => {
  return (
    <button
      type="button"
      onClick={onClick}
      title={title}
      className={`phaseItem ${
        !selected && currentPhaseNumber > phaseNumber ? 'done' : ''
      }${selected ? ' current' : ''}
      ${disabled ? 'disabled' : ''}`}
    >
      {icon}
      <p>
        <span>
          {title}
          {points ? (
            <span>
              {points}pt{points !== 1 ? 's' : ''}
            </span>
          ) : null}
        </span>
      </p>
    </button>
  );
};

export default PhaseItem;