import React from "react"

/**
 * 星-默认icon
 * @returns
 */
export const StarBaseIcon = ({ className = "" }) => {
  return (
    <svg
      width="16"
      height="15"
      viewBox="0 0 16 15"
      xmlns="http://www.w3.org/2000/svg"
      className={`${className} align-middle`}
    >
      <g fill="none" fillRule="evenodd">
        <path d="M1 .333h14v14.233H1z" />
        <path
          d="m14.186 5.549-3.967-.586-1.774-3.656a.498.498 0 0 0-.897 0L5.775 4.963l-3.967.586a.496.496 0 0 0-.286.148.515.515 0 0 0 .01.72l2.87 2.844-.679 4.018a.512.512 0 0 0 .05.322.495.495 0 0 0 .675.213l3.549-1.897 3.548 1.897a.49.49 0 0 0 .317.05.507.507 0 0 0 .408-.585l-.678-4.018 2.87-2.845a.51.51 0 0 0 .146-.29.505.505 0 0 0-.422-.577z"
          strokeOpacity=".3"
          stroke="#3C3C43"
        />
      </g>
    </svg>
  )
}

/**
 * 星-选中icon
 * @returns
 */
export const StarCheckedIcon = ({ className = "" }) => {
  return (
    <svg
      width="14"
      height="15"
      viewBox="0 0 14 15"
      xmlns="http://www.w3.org/2000/svg"
      className={`${className} align-middle`}
    >
      <g fill="none" fillRule="evenodd">
        <path d="M0 .333h14v14.233H0z" />
        <path
          d="m13.186 5.549-3.967-.586-1.774-3.656a.498.498 0 0 0-.897 0L4.775 4.963l-3.967.586a.496.496 0 0 0-.286.148.515.515 0 0 0 .01.72l2.87 2.844-.679 4.018a.512.512 0 0 0 .05.322.495.495 0 0 0 .675.213l3.549-1.897 3.548 1.897a.49.49 0 0 0 .317.05.507.507 0 0 0 .408-.585l-.678-4.018 2.87-2.845a.51.51 0 0 0 .146-.29.505.505 0 0 0-.422-.577z"
          fill="#007AFF"
          fillRule="nonzero"
        />
      </g>
    </svg>
  )
}

export const StarIcon = ({ like = false, className = "" }) => {
  return like ? <StarCheckedIcon className={className} /> : <StarBaseIcon className={className} />
}