import { Carousel, Image } from 'antd'
import React from 'react'
import './index.less'


export interface PhotoMessage{
    id: string,     //照片id
    url: string     //照片网址
}

interface Iprops {
    photos: PhotoMessage[]   //照片信息数组
    width?: number           //照片展示宽度
    height?: number          //照片展示高度
}

export default function PhotoPanel(props: Iprops) {
    return (
        <div className="tn-photo-panel-container">
            {props.photos.length > 0 && (
                <Carousel autoplay key="tn-photo-panel-carousel" effect="fade">
                    {props.photos.map(photo => (
                        <div key={photo.id}>
                            <Image 
                            width={props.width ? props.width : 200}
                            height={props.height ? props.height : 200}
                            key={photo.id}
                            src={photo.url}
                            rootClassName="photo-wrapper" />
                        </div>
                    ))}
                </Carousel>
            )}
        </div>
    )
}