import styled from 'styled-components/macro'

type StarProps = {
  isFavorite: boolean,
}

const IconStar = styled.div<StarProps>`
  display: block;
  margin-right: 0.472rem;
  width: 0.95rem;
  height: 0.95rem;
  background-image: ${({ isFavorite }) => (
    isFavorite
      ? 'url(/images/icon_star_full.svg);'
      : 'url(/images/icon_star.png);'
  )};
  background-repeat: no-repeat;
  background-size: contain;

  @media (max-width: 650px){
    width: 11px;
    height: 11px;
  }
`

export const StarIcon = ({ isFavorite }: StarProps) => (
  <IconStar isFavorite={isFavorite} />
)
