import React from "react";
import { Card } from "components/Card/Card.jsx";
import {Col, Row} from "react-bootstrap";
import styled from "styled-components"
import moment from "moment";

const UserData = styled.div`
  padding: 4px 0;
  font-size: 15px;
`;

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

  return (
    <Card
      title={`${userId}번 사용자`}
      stats={getStats}
      statsIcon="fa fa-history"
      content={
        <div>
          <Row>
            <Col md={6} sm={6} xs={12}>
              <UserData>이름</UserData>
            </Col>
            <Col md={6} sm={6} xs={12}>
              <UserData>사용자 ID</UserData>
            </Col>
          </Row>
          <Row>
            <Col md={6} sm={6} xs={12}>
              <UserData>전화번호</UserData>
            </Col>
            <Col md={6} sm={6} xs={12}>
              <UserData>이메일 가입 날짜</UserData>
            </Col>
          </Row>
          <Row>
            <Col md={6} sm={6} xs={12}>
              <UserData>가입 날짜</UserData>
            </Col>
            <Col md={6} sm={6} xs={12}>
              <UserData>최근 로그인 날짜</UserData>
            </Col>
          </Row>
          <Row>
            <Col md={6} sm={6} xs={12}>
              <UserData>면허증 등록 여부</UserData>
            </Col>
            <Col md={6} sm={6} xs={12}>
              <UserData>카드 등록 여부</UserData>
            </Col>
          </Row>
        </div>
      }
    />
  );
};

export default UserDataCard;