import { Descriptions } from 'antd';
import { iconFront } from '../../assets/Iconfont';

type ListPageType = {
   data: [{
    title: string,
    description: string,
    type: 'text'| 'image',
    name: string,
    span?: number,
    }
   ],
  };
  

const ListPage = ({data}:ListPageType) => {

  // 后续添加其他类型 目前只有text和icon 
  // image file 样式待修改
  const descriptionContent=(description:{
    title:string,
    description:string,
    type: 'text'| 'image'|'icon'| 'file',
    link?:string
  })=>{
    switch(description.type){
      case 'text':
        return <span>{description.description}</span>;
      case 'image':
        return <img src={description.description} alt="" style={{width:100,height:100}}/>;
      case 'icon':
        return <span>{iconFront[description.description]}</span>;
      case 'file':
        return <a download={description.link} target="_blank" rel="noopener noreferrer">{description.description}</a>;
      default:
        return <span>{description.description}</span>;
    }
  };
  
  return (
    <Descriptions column={2} title=" " style={{
      minHeight: 300,
    }} >
      {data.map((item)=>(
        <Descriptions.Item 
        contentStyle={{paddingBottom:8}}
        span={item.span||1} 
        key={item.name} 
        label={item.title}>
        {descriptionContent(item)}
      </Descriptions.Item>
      ))}
    
  </Descriptions>
  );
};

export default ListPage;