import React from "react";
import { cricketData } from "./CricketData";

const Cricketers = () => {
  const getDetails = (id) => {
    let cricketDetailById = cricketData.find((data) => data.id === id).details;
    console.log(cricketDetailById);
  };
  return (
    <>
      {cricketData.map((data) => {
        //return <Cricketer cricket={data} key={data.id} />;
        return <Cricketer {...data} key={data.id} getDetails={getDetails} />;
      })}
    </>
  );
};

const Cricketer = (props) => {
  //const { name, category } = props.cricket;
  const { name, category, id, getDetails } = props;
  console.log(props);

  return (
    <div>
      <ul>
        <li>{name}</li>
        <li>{category}</li>
        <button onClick={() => getDetails(id)}>Details</button>
        <hr></hr>
      </ul>
    </div>
  );
};
export default Cricketers;