import React, { useState, useRef } from 'react';
import Icon from 'src/components/Icon/index';

import '../g.scss';

function SelectIcon(props: ISelectIcon) {
  const {
    value,
    title = '样式',
    selectList = [
      { value: 'icon-yeqian-xiala-copy', label: '线' },
      { value: 'icon-xiangxiasanjiao-copy', label: '面' }
    ],
    change
  } = props;

  return (
    <div className="zl-lagre-screen-select-icon-wrap">
      <p>{title}</p>
      <div className="zl-lagre-screen-select-icon">
        {selectList?.map((item) => {
          return (
            <div
              key={item?.value}
              className={value === item?.value ? 'active zl-lagre-screen-select-icon-item' : 'zl-lagre-screen-select-icon-item'}
              onClick={() => {
                change?.(item?.value);
              }}
            >
              <Icon
                key={item?.value}
                name={item?.value}
                style={{ cursor: 'pointer' }}
              />
            </div>
          );
        })}
      </div>
    </div>  
  );
}

export default SelectIcon;

export interface ISelectIcon {
  value: string;
  title: string;
  selectList?: ISelect[];
  change: Function;
}

export interface ISelect {
  key: string;
  value?: string;
}