import * as React from 'react';
import classNames from 'classnames/bind';
import styles from './Ranking.scss';
import RankingTable from '@src/components/common/RankingTable';
import { useDispatch, useSelector } from 'react-redux';
import { fetchSaleRanking } from '@src/store/reducers/SaleReducer';

const cx = classNames.bind(styles);

export interface IRankingProps {
}

export default function Ranking (props: IRankingProps) {
  const { dataRaking } = useSelector((store) => store.sale);
  const dispatch = useDispatch();
  const dispatchSaleRanking = () => {
    dispatch(fetchSaleRanking({
      limit: 100
    }))
  } 
  
  React.useEffect(() => {
    dispatchSaleRanking()
  }, [])

  return (
    <div className={cx('ranking')}>
        <div className={cx('title')}>랭킹</div>
        <RankingTable data={dataRaking} />
    </div>
  );
}
