// 图例列表
import styled from "styled-components";

function Legend(props) {
  const { list, style, active, onClick } = props;

  return (
    <Box style={style}>
      {list.map((item) => (
        <Item
          onClick={() => onClick(item.type)}
          className={`${active == item.type ? "active" : ""}`}
        >
          {item.name}
        </Item>
      ))}
    </Box>
  );
}

const Box = styled.ul`
  margin: 0;
  padding: 0;
  width: 140px;
  position: absolute;
  z-index: 999;
  color: #fff;
  font-size: 16px;
  top: 100px;
  text-align: center;
  left: 26vw;
`;
const Item = styled.li`
  margin: 0;
  padding: 8px 20px;
  width: 100%;
  margin-bottom: 14px;
  cursor: pointer;
  background: url(${require("../../assets/legend.svg")}) no-repeat center;
  background-size: 100% 100%;
  &.active,
  &:hover {
    background-image: url(${require("../../assets/legend-active.svg")});
  }
`;

export default Legend;