import styled from "styled-components";

import Editable from "../components/Editable"

const StyledReward = styled.div`
  ${props => props.$sty}
`

function Reward({ props }) {
  const limit = parseInt(props.reward.attributes.limit);
  const style = props.reward.styles;

  return (
    <div className="container">
      <StyledReward id="reward" className="ld-item box reward" $sty={style}>
        <Editable props={props.reward_heading} />

        <ul className=" list reward-list">
          {
            [...Array(limit)].map((item, index) =>
              <li className="reward-item" key={index}>
                <div className="reward-top">
                  <div className="reward-img">
                    <img src="src/assets/images/hnc-game-2-voucher-1.png" alt="Voucher" width="111" height="111" />
                  </div>
                  <div className="flex-1">
                    <p className="reward-no">1 giải nhất</p>
                    <p className="reward-name">PC GAMING HACOM HURACAN</p>
                  </div>
                </div>
                <p className="reward-price">Trị giá <b className="reward-bold">59.999.000 đ</b></p>
              </li>
            )
          }
        </ul>
      </StyledReward>
    </div>
  )
}

export default Reward