import StarIcon from 'atoms/Icons/StarIcon'
import { classes } from './fixture'

const StarAndNumberWrap = styled.div.attrs({
  className: 'star-number-wrap',
}) `
  display: flex;
  align-items: center;
`

// StarParent
// start-rating
const StarListWrap = styled.div`
  padding-right: rem(6);
  @tablet-or-smaller() {
    padding-right: rem(4);
  }
`

const TotalRatings = styled.div.attrs({
  className: classes.totalRatings,
}) `
  /* margin-top: rem(1);
  margin-right: rem(2); */
  @font (12,semi);
  order: 1;
  @tablet-or-smaller() {
    @font (12, regular);
    color: $colors-almostgreyblue;
  }
`

/**
 * @todo  - this is the second best place to test hoist
 *
 * @todo remember :hover is not allowed when disabled
 * @todo
 *    clip-path: inset(0px 12px 0px 0px);
 *
 * @todo white rabbit has orange stars when full
 */
const StyledStarIcon = styled.withComponent(StarIcon) `
  width: rem(13);
  height: rem(11);
  margin-right: rem(3);

  .path {
    fill: $colors-black;
    transition: 0.5s fill ease-in-out;

    /* @todo for offsetting...? */
    margin-left: rem(2);
  }
  ${props =>
    props.empty &&
    styled.css`
      path {
        fill: $colors-gray;
      }
    `}

  /* @note also had this on hover */
  transition: 0.5s clip ease-in-out;
  ${props =>
    props.half &&
    styled.css`
      clip-path: inset(0px 6px 0px 0px);
    `}
`

const StarNumber = styled.span`
  @font (16, bold);
  color: #6d707f;
  padding: $spacing-extra-small;
`

export {
  StarAndNumberWrap,
  StarListWrap,
  TotalRatings,
  StyledStarIcon,
  StarNumber,
}