/**
 * Category list in the corner
 */

import React, { useState, useEffect } from "react";

const categories = "No6092,1620s,painting,blunt,National Gallery of Canada,AGO,courtauld,intervensions,connsoeurship,double agent,forensics,black box,Stankievech".split(
  ","
);

export default function Legend({ visible, selected, onSelect }) {
  return (
    <div className="legend" style={{ opacity: visible ? 1 : 0 }}>
      {categories.map((category, index) => (
        <div
          key={category}
          className={
            selected ? (selected === index + 1 ? "selected" : "unselected") : ""
          }
          onClick={() => onSelect(index + 1)}
        >
          {category}
        </div>
      ))}
    </div>
  );
}