import machineIcon from "./img/machine.svg";
import pointIcon from "./img/point.svg";
import PointType from "../utils/pointsType";
import KartografOpeningHours from "./kartografOpeningHours";

const KartografPointsListPosition = (props) => {
  return (
    <div className={"epaka-punkt"}>
      <div
        className={`epaka-punktPadding ${props.active ? "epaka-active" : ""}`}
      >
        <div
          onClick={() => {
            props.onClick();
          }}
        >
          <div className={"punktTitle punktInfoClickable"}>
            <img
              className={"punktIkona"}
              src={
                props.point.type === PointType.Machine ? machineIcon : pointIcon
              }
            />
            <div className={"punktTitleText"}>{props.point.name}</div>
          </div>
          <div className={"punktAddress"}>
            <div className={"row1"}>
              {props.point.address.street} {props.point.address.building_number}
              {props.point.address.locale_number && (
                <span> / {props.point.address.locale_number}</span>
              )}
            </div>
            <div className={"row2"}>
              {props.point.address.postal_code
                ? props.point.address.postal_code + ", "
                : ""}{" "}
              {props.point.address.city}, {props.point.address.country}
            </div>
          </div>
        </div>
        <KartografOpeningHours hours={props.point.open_hours} />
      </div>
    </div>
  );
};

export default KartografPointsListPosition;
