import getImage from "../../utils/getImage";

export default function ProductProvision(props){
    const productTitle  = props.productData?.title;
    const productDescription  = props.productData?.description;

    return <>
        <div className="row">
            <div className="col-md-12">
                <div className="card card-statistics">
                    <div className="card-header">
                            <div className="card-heading">
                            <h4 className="card-title">Creating - {productTitle} </h4>
                            </div>
                        </div>
                        <div className="card-body">
                            <div className="progress">
                                <div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                                aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style={{width:'75%'}} ></div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
        <div className="row">
            <div className="col-md-12">


            </div>
        </div>
        <div className="row">

            <div className="col-lg-6">

                <div className="card card-statistics">
                    <div className="card-header">
                        <div className="card-heading">
                            <h4 className="card-title">Progress Information</h4>
                        </div>
                    </div>
                    <div className="card-body">
                        <div className="table-responsive">
                            <table className="table table-info mb-0">
                                <thead>
                                <tr>
                                    <th scope="col" style={{width: '10px'}}>#</th>
                                    <th scope="col">Action</th>

                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>Start Creation </td>

                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Update Access Routes</td>

                                </tr>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>Veryfing ...</td>

                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div className="col-lg-6">
                <div className="card card-statistics ">
                    <h4 className="card-title" style={{padding:'10px'}}>Started creating your selection</h4>
                    <img className="card-img-top" src={getImage('widget/working.jpg')}  alt="Card image cap" />
                    <div className="card-body">
                     <p>
                         {productDescription}
                     </p>
                    </div>
                </div>

            </div>


        </div>
    </>
}