import React from "react";

function ColorPill({ year, active }) {
  return (
    <div className="d-inline-block" key={year}>
      {active ? (
        <div
          className={`rounded-pill color-of-the-year-${year % 9}`}
          style={{ width: "75px", height: "30px", margin: "2px" }}
        ></div>
      ) : (
        <div
          className={`rounded-pill color-of-the-year-blank`}
          style={{ width: "75px", height: "30px", margin: "2px" }}
        ></div>
      )}
    </div>
  );
}

export default ColorPill;