import styled from 'styled-components/macro'

const Svg = styled.svg`
  margin-right: 0.472rem;
  width: 0.95rem;
  height: 0.95rem;

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

type StarProps = {
  isFavorite: boolean,
}

export const StarIcon = ({ isFavorite }: StarProps) => (
  <Svg width='100%' height='100%' viewBox='0 0 23 22' xmlns='http://www.w3.org/2000/svg'>
    <g filter={`url(#${isFavorite ? 'filled' : 'outline'})`}>
      {
        isFavorite
          ? (
            <path d='M11.3035 0.693359L14.2112 6.82911L20.9452 7.6985L16.0083 12.36L17.2624 19.033L11.3035 15.7783L5.34453 19.033L6.59861 12.36L1.66171 7.6985L8.3957 6.82911L11.3035 0.693359Z' fill='white' />
          ) : (
            <path d='M11.3035 2.27156L13.6005 7.11855L13.7586 7.45214L14.1247 7.49941L19.4442 8.18619L15.5443 11.8686L15.2759 12.122L15.3441 12.4848L16.3347 17.7563L11.6274 15.1851L11.3035 15.0081L10.9795 15.1851L6.27218 17.7563L7.26285 12.4848L7.33103 12.122L7.06262 11.8686L3.16267 8.18619L8.48224 7.49941L8.84836 7.45214L9.00645 7.11855L11.3035 2.27156Z' stroke='white' strokeWidth='1.35172' />
          )
      }
    </g>
    <defs>
      <filter id='outline' x='0.44043' y='0' width='19.119' height='18.2812' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
        <feFlood floodOpacity='0' result='BackgroundImageFix' />
        <feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' />
        <feOffset dy='1' />
        <feGaussianBlur stdDeviation='0.5' />
        <feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0' />
        <feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow' />
        <feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape' />
      </filter>
      <filter id='filled' x='0.309897' y='0.693359' width='21.9869' height='21.0431' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
        <feFlood floodOpacity='0' result='BackgroundImageFix' />
        <feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' />
        <feOffset dy='1.35172' />
        <feGaussianBlur stdDeviation='0.675862' />
        <feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0' />
        <feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow' />
        <feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape' />
      </filter>
    </defs>
  </Svg>
)