import React, { PropTypes } from 'react';
import { Link } from 'react-router';
import Icon from 'components/icon';
import CSSModules from 'react-css-modules';
import styles from './app-card.pcss';
import { idSlug } from 'core/utils';

const AppCard = ({ appIcon, displayName, id, name, tagline, type }) => {
  return (
    <li styleName="item">
      <Link styleName="card" to={`/apps/${idSlug(id, name)}`}>
        <img alt={displayName} src={appIcon} styleName="icon" />
        <div>
          <p styleName="name">{displayName}</p>
          <p styleName="tagline">{tagline}</p>
        </div>
        <div styleName="type">
          <Icon color="regent" icon={type} />
        </div>
      </Link>
    </li>);
};

AppCard.propTypes = {
  appIcon: PropTypes.string,
  displayName: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  tagline: PropTypes.string,
  type: PropTypes.oneOf(['app', 'setting', 'os'])
};

export default CSSModules(AppCard, styles);