import React, { useMemo } from 'react';
import Wrap from '../wrap/Wrap';
import Icon from '../../Icon/index';
import { returnClass } from '../unit';

import riseEffect from './riseEffect.svg';
import classic from './classic.svg';
import starrySky from './starrySky.svg';

import '../g.scss';

function ListBy2(props: IListBy2) {
  const { list, wrapStyle = { padding: '12px 5px' }, change } = props;
  const srcs = {
    riseEffect,
    classic,
    starrySky
  };

    return (
      <Wrap wrapStyle={wrapStyle}>
        <div className="zl-large-screen-setting-unit-cards">
          {list?.map((item) => {
            return (
              <div
                className={`${
                  item?.value ? 'active' : ''
                } zl-large-screen-setting-unit-card`}
                onClick={() => {
                  change?.({key:'changeSceneEffect', itemKey:item?.key, value:!item?.value })}}
              >
                {item?.value ? <span>使用中</span> : <></>}
                <img src={srcs?.[item?.key]} alt="" />
                <p>{item?.title}</p>
              </div>
            );
          })}
        </div>
      </Wrap>
    );
}

export default ListBy2;

export interface IListBy2 {
  list?: IList[];
  key?: string;
  attrKey?: string;
  wrapStyle?: React.CSSProperties;
  change?: Function;
}

export interface IList {
  key?: string;
  value?: boolean;
  title?: string;
}