import React from 'react'
import PropTypes from 'prop-types'
import { LittleOfferCardContainer, OfferCategory, OfferCategoryIcon, OfferDetails, OfferImage, OfferName, OfferSwapsIcon, OfferSwapsIconContainer } from './LittleOfferCard.styled'

const LittleOfferCard = (props) => {
    return (
        <LittleOfferCardContainer>
            <OfferImage src={props.image} />
            <OfferDetails>
                <OfferName>{props.name}</OfferName>
                <OfferCategory>
                    <OfferCategoryIcon />
                {props.categoryName}</OfferCategory>
            </OfferDetails>
            <OfferSwapsIconContainer>
                <OfferSwapsIcon />
            </OfferSwapsIconContainer>
          </LittleOfferCardContainer>
    )
}

LittleOfferCard.propTypes = {
    image: PropTypes.string,
    name: PropTypes.string,
    categoryName: PropTypes.string,
}

export default LittleOfferCard