import { useState } from "react";
import Cards from "./cards";
import Head from "./head";
import List from "./List";

function Bank({ data, loading }) {
  const [list, setList] = useState(data);

  const changeStatus = (value, id) => {
    let newList = list;
    if (value) {
      newList = newList.map((item, idx) => {
        return {
          ...item,
          status: item.id === id ? value : false,
        };
      });
    }
    setList(newList);
  };

  return (
    <div className="opacity-page">
      <Head />
      <List data={list} loading={loading} changeStatus={changeStatus} />
      <Cards data={list} loading={loading} changeStatus={changeStatus} />
    </div>
  );
}

export default Bank;
