import React, { Component } from "react";
import { Grid, Row, Col, Table } from "react-bootstrap";

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

const thArray = ['킥보드 시리얼 번호', '대여 시각', '반납 시각', '대여 시간', '이동 거리', '대여 금액'];

class UserHistoryCard extends Component {
  render() {
    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 UserHistoryCard;