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";
import moment from "moment";

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

const UserHistoryCard = (props) => {
  const {userId, rentData} = props;
  const getStats = `마지막 업데이트 ${moment().format("YYYY/MM/DD hh:mm")}`;

  return (
    <Card
      title={`${userId}번 사용자 킥보드 사용 히스토리`}
      ctTableFullWidth
      ctTableResponsive
      stats={getStats}
      statsIcon="fa fa-history"
      content={
        <Table striped hover>
          <thead>
          <tr>
            {thArray.map((prop, key) => {
              return <th key={key}>{prop}</th>;
            })}
          </tr>
          </thead>
          <tbody>
          {rentData.map((data, idx) => (
              <tr key={idx}>
                <td>{data.serial_number}</td>
                <td>{data.rent_datetime}</td>
                <td>{data.return_datetime}</td>
                <td>{data.rental_time}</td>
                <td>{data.rental_distance}</td>
                <td>{data.rental_fee}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      }
    />
  );
};

export default UserHistoryCard;