import React from "react";
import PropTypes from "prop-types";
import { formatTimeSrb } from "../../util/helpers/dateHelpers";

const DayComponent = ({ numberOfDay, nameOfDay, interviews, onClick }) => {
  return (
    <div className="day-component-container" onClick={onClick}>
      <div className="day-component-day-informations-container">
        <p className="day-component-day-number">{numberOfDay}</p>
        <p className="day-component-day-name">{nameOfDay}</p>
      </div>
      {interviews && interviews.slice(0, 2).map((interview, index) => (
        <div
          key={index}
          className="day-component-interviews-container"
          style={{ marginTop: "4px" }}
        >
          <p className="day-component-interviews-time">
            {formatTimeSrb(interview.date)}
          </p>
          <p className="day-component-interviews-name">
            {interview.selectionLevel.name}
          </p>
        </div>
      ))}
      {interviews && interviews.length > 2 && (
        <span className="day-component-more">
          +{interviews.length - 2} stavke
        </span>
      )}
    </div>
  );
};

DayComponent.propTypes = {
  numberOfDay: PropTypes.number,
  nameOfDay: PropTypes.string,
  interviews: PropTypes.array,
  onClick: PropTypes.func,
};

export default DayComponent;
