import classNames from 'classnames';
import { CSSProperties } from 'react'

function Ships() {
    let shipIndexes = [
        { size: 2, index: null },
        { size: 3, index: 1 },
        { size: 3, index: 2 },
        { size: 3, index: 3 },
        { size: 4, index: 1 },
        { size: 4, index: 2 }
    ];

    return <>
        {shipIndexes.map(({ size, index }, i) => {
            const filename = `/assets/ship_blue_${size}x${index ? '_' + index : ''}.gif`
            return (
                <div key={i} className={classNames('ship', 's' + size)} style={{ '--x': i + 3 } as CSSProperties}>
                    <img src={filename} alt={filename} />
                </div>
            )
        })}
    </>
}

export default Ships;