import { Component, h } from "atomico";
import style from "./kun-rating.css";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

export function KunRating(props) {
  const stylesheet = `
    ${style}
    
    .star-ratings {
      width: 140px;
      font-size: 24px
    }
    .fill-ratings {
      width: ${props.needlePercentage}px;
    }
    `;
  return (
    <host>
      <style>{stylesheet}</style>
      <div className="star-ratings">
        <div className="fill-ratings">
          <span>★★★★★</span>
        </div>
        <div className="empty-ratings">
          <span>★★★★★</span>
        </div>
      </div>
    </host>
  );
}

KunRating.props = {
  needlePercentage: {
    type: Number,
    value: 50,

  },
};
export default getComponentOrDefine("kun-rating", KunRating);
