import { fetchCSV } from "macro:fetchCSV";

export const Covid19 = () => {
  const rows = fetchCSV(
    "https://covid19.who.int/WHO-COVID-19-global-data.csv",
    {
      last: 100,
      columns: ["New_cases", "Date_reported", "Country"],
    }
  );

  return (
    <div>
      <h2>Covid-19</h2>
      <h6>last {rows.length} updates from the WHO</h6>
      <div className="Table">
        <div className="Header">
          <div className="Heading">New Cases</div>
          <div className="Heading">Date</div>
          <div className="Heading">Country</div>
        </div>

        {rows.map((row, index) => (
          <div className="Row" key={index}>
            <div className="Column">{row[0]}</div>
            <div className="Column">{row[1]}</div>
            <div className="Column">{row[2]}</div>
          </div>
        ))}
      </div>
    </div>
  );
};