import React from 'react';
import CIcon from '@coreui/icons-react';
import {
  CCol,
  CFormGroup,
  CInput,
  CInputFile,
  CLabel,
  CButton,
  CCard,
  CCardHeader,
  CCardBody,
  CCardFooter,
} from '@coreui/react';

const Dashboard = (props) => {
  return (
    <div>
      <CCard className="bg-info">
        <CCardBody>
          <div className="text-white text-center card bg-info">
            <div className="card-body">
              <blockquote className="card-bodyquote">
                {props.gotuserid ? ( // Conditional rendering based on props.gotuserid
                  <>
                    <h3>ワンタイムパスワード: {props.userid}</h3>
                    <a target="_blank" href="https://openshield.ts.bizside.biz/appexe/natnats/23/bin/mobileweb2/index.html">
                      <h1>FBS Web app</h1>
                    </a>
                  </>
                ) : (
                  <div className="text-center">
                    {/* Replace the following div with your wait indicator or spinner */}
                    <h3>読み込み中...</h3>
                  </div>
                )}
              </blockquote>
            </div>
          </div>
        </CCardBody>
      </CCard>
    </div>
  );
};

export default Dashboard;