import {useParams, useLocation} from 'react-router-dom';
import { useGetMarketsQuery } from './coinList-api';
import Pager from './coinListPager';

const CoinList = (): JSX.Element => {
 
    const location = useLocation()
    const { page } = useParams();

    const { data, error, isLoading, isSuccess, refetch } = useGetMarketsQuery();
    console.log(page)
    console.log(location.search)
    
    return (
      <div>
        CoinList
        <table>
        <thead>

        </thead>
          <tbody>
            { data && 
              data.map((item: any, index: any) => {
                return (
                  <tr key={index}>
                    <td><img src={item.image} width="20" height="20" /></td>
                    <td>{item.symbol}</td>
                    <td>{item.id}</td>
                    <td>{item.name}</td>
                    <td>{item.high_24h}</td>
                    <td>{item.low_24h}</td>
                    <td>{item.price_change_percentage_24h}</td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
        <Pager />
      </div>
    )
  }
  
  export default CoinList;