import React from 'react';
import PropTypes from 'prop-types';
import { Image } from '../../Image';

import { Airplane, Ship, Bus } from '../icons';

const AIRPLANE_SIZE = 32;

const Transport = ({ bearing, icon }) => {
  const iconStyle = {
    position: 'absolute',
    width: AIRPLANE_SIZE,
    height: AIRPLANE_SIZE,
    left: -AIRPLANE_SIZE / 2,
    top: -AIRPLANE_SIZE / 2,
  };

  switch (icon) {
    case 'airplane':
      return (
        <Airplane
          alt="airplane"
          style={{ ...iconStyle, transform: `rotate(${bearing}deg)` }}
        />
      );
    case 'ship':
      return <Ship alt="ship" style={iconStyle} />;
    case 'bus':
      return <Bus alt="bus" style={iconStyle} />;
    default:
      return <Image src={icon} style={iconStyle} />;
  }
};

Transport.propTypes = {
  bearing: PropTypes.number.isRequired,
  icon: PropTypes.string.isRequired,
};

export default Transport;