import { SelectedPage } from '@/types/home';
import { motion } from 'framer-motion';

type Props = {
  setSelected: (value: SelectedPage) => void;
};

const BuyProps = ({ setSelected }: Props) => {
  return (
    <motion.div
      className="buy-props-on-sec layer-1"
      onViewportEnter={() => setSelected(SelectedPage.HowtoBuyProps)}
      id={SelectedPage.HowtoBuyProps}
    >
      <div className="container-1400 container">
        <div className="sub-title-block text-center">
          <h3 className="title-md">Buy $PROPS on:</h3>
        </div>
        <div className="wallet-row d-flex">
          <div className="wallet-col">
            <span className="high-badge">
              <img src="img/recmd-bdg.svg" alt="" /> Highly Recommend
            </span>
            <img src="img/buy-prps-1.svg" alt="" />
            MEXC
          </div>
          <div className="wallet-col">
            <img className="toggle-img-clr pan-icon" src="img/buy-prps-2.svg" alt="" />
            <img
              className="img-fltr-0 toggle-img-light pan-icon"
              src="img/buy-prps-2-white.svg"
              alt=""
            />
            Pancake
          </div>
          <div className="wallet-col">
            <img src="img/buy-prps-3.svg" alt="" />
            Liquidswap
          </div>
          <div className="wallet-col">
            <img src="img/buy-prps-4.svg" alt="" />
            Chainge Finance
          </div>
          <div className="wallet-col">
            <img src="img/buy-prps-5.svg" alt="" />
            Gate.io
          </div>
          <div className="wallet-col">
            <img className="toggle-img-clr pan-icon" src="img/buy-prps-6.svg" alt="" />
            <img
              className="img-fltr-0 toggle-img-light pan-icon"
              src="img/buy-prps-6-white.svg"
              alt=""
            />
            Bitget
          </div>
          <div className="wallet-col">
            <img src="img/buy-prps-7.svg" alt="" />
            Bitmart
          </div>
          <div className="wallet-col">
            <img src="img/buy-prps-8.svg" alt="" />
            BingX
          </div>
        </div>
      </div>
    </motion.div>
  );
};

export default BuyProps;