import ScoreBar from "./ScoreBar";

interface Props {
  data: any;
}

const categories = [
  ["Physique", "physique"],
  ["Health", "health"],
  ["Relationship", "relationship"],
  ["Career", "career"],
  ["Travel", "travel"],
  ["Family", "family"],
  ["Friends", "friends"],
  ["Finances", "finances"],
  ["Status", "status"],
];

export default function YearlyHoroscope({
  data,
}: Props) {
  const phases = [
    "phase_1",
    "phase_2",
    "phase_3",
    "phase_4",
  ];

  return (
    <div className="yearly-horoscope">

      {phases.map((phase, index) => {

        const quarter =
          data?.[phase];

        if (!quarter) {
          return null;
        }

        return (
          <section
            key={phase}
            className="yearly-quarter"
          >

            <div className="quarter-header">

              <div>
                <h2>
                  Quarter {index + 1}
                </h2>

                <span>
                  {quarter.period}
                </span>
              </div>

              <strong>
                {quarter.score}
              </strong>

            </div>

            <p className="quarter-prediction">
              {quarter.prediction}
            </p>

            <div className="yearly-category-grid">

              {categories.map(
                ([label, key]) => {

                  const item =
                    quarter[key];

                  if (!item) {
                    return null;
                  }

                  return (
                    <div
                      key={key}
                      className="yearly-category"
                    >

                      <ScoreBar
                        label={label}
                        value={
                          item.score
                        }
                      />

                      <p>
                        {item.prediction}
                      </p>

                    </div>
                  );
                }
              )}

            </div>

          </section>
        );
      })}

    </div>
  );
}