import React from "react";
import {Table} from "react-bootstrap";
import { Card } from "components/Card/Card.jsx";

import { tdArray } from "variables/Variables.jsx";

const thArray = ['유저ID', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액'];

const KickboardHistoryTable = () => {

  return (
    <Card
      title="Striped Table with Hover"
      category="Here is a subtitle for this table"
      ctTableFullWidth
      ctTableResponsive
      content={
        <Table striped hover>
          <thead>
          <tr>
            {thArray.map((prop, key) => {
              return <th key={key}>{prop}</th>;
            })}
          </tr>
          </thead>
          <tbody>
          {tdArray.map((prop, key) => {
            return (
              <tr key={key}>
                {prop.map((prop, key) => {
                  return <td key={key}>{prop}</td>;
                })}
              </tr>
            );
          })}
          </tbody>
        </Table>
      }
    />
  )
};

export default KickboardHistoryTable;