import { Descriptions } from 'antd';
import fault from '../../assets/fault-tolerant.png';

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

const ListPage = ({ data }: ListPageType) => {
  const descriptionContent = (description: {
    title: string;
    description: string;
    type: 'text' | 'image' | 'icon' | 'file';
  }) => {
    switch (description.type) {
      case 'text':
        return <span>{description.description}</span>;
      case 'image':
        return (
          <img
            src={description.description}
            alt=""
            onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) => {
              const target = e.target as HTMLImageElement;
              target.src = fault;
            }}
            style={{ width: 100, height: 100, objectFit: 'cover' }}
          />
        );
      case 'file':
        return (
          <a
            href={description.description}
            target="_blank"
            rel="noopener noreferrer"
          >
            下载
          </a>
        );
      default:
        return <span>{description.description}</span>;
    }
  };

  return (
    <Descriptions column={2} title=" ">
      {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;