import React, { Component } from "react";
import { Grid, Row, Col, Table } from "react-bootstrap";
import styled from "styled-components";
import Card from "components/Card/Card.jsx";
import { tdArray } from "variables/Variables.jsx";

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

const UserHistoryCard = (props) => {
  const {userId} = props;

  return (
    <Card
      title={`${userId}번 사용자 킥보드 사용 히스토리`}
      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;