import { Flex } from 'antd';
import styles from './index.less';

type GraphLegendData = {
  name: string;
  color: string;
  radius: number | string;
  fill: boolean;
};

type GraphLegendProps = {
  style?: React.CSSProperties;
};

function GraphLegend({ style }: GraphLegendProps) {
  const legends: GraphLegendData[] = [
    {
      name: '父模型',
      color: 'linear-gradient(305deg,#43c9b1 0%,#93dfd1 100%)',
      radius: 2,
      fill: true,
    },
    {
      name: '当前模型',
      color: 'linear-gradient(139.97deg,#72a1ff 0%,#1664ff 100%)',
      radius: 2,
      fill: true,
    },
    {
      name: '衍生模型',
      color: 'linear-gradient(139.97deg,#72b4ff 0%,#169aff 100%)',
      radius: 2,
      fill: true,
    },
    {
      name: '训练数据集',
      color: '#a5d878',
      radius: '50%',
      fill: true,
    },
    {
      name: '测试数据集',
      color: '#d8b578',
      radius: '50%',
      fill: true,
    },
    {
      name: '项目',
      color: 'linear-gradient(305deg,#8981ff 0%,#b3a9ff 100%)',
      radius: 6,
      fill: true,
    },
  ];
  return (
    <Flex align="center" className={styles['graph-legend']} style={style}>
      {legends.map((item) => (
        <Flex align="center" key={item.name} className={styles['graph-legend__item']}>
          <div
            style={{
              width: '16px',
              height: '12px',
              borderRadius: item.radius,
              background: item.color,
            }}
          ></div>
          <div className={styles['graph-legend__item__name']}>{item.name}</div>
        </Flex>
      ))}
    </Flex>
  );
}

export default GraphLegend;
