import * as React from "react";

export class CalculatePrice extends React.Component {
  public render(): JSX.Element {
    return (
        <div className="product_right col-lg-8 col-md-8 col-sm-12 col-xs-12">
                <div className="product_inner_detail afclr">
                    <div className="business_card afclr">
                        <h2>Standard Business Card</h2>
                        <div className="card_list row afclr">
                            <div className="card_listing col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                <ul>
                                    <li>Thick, premium quality cardstock</li>
                                    <li>Vibrant full color printing</li>
                                </ul>
                            </div>
                            <div className="card_listing card_listing_2 col-lg-6 col-md-12 col-sm-12 col-xs-12">
                                <ul>
                                    <li>Gloss, matte or uncoated finish</li>
                                    <li>Standard, square, slim or any custom size</li>
                                </ul>
                            </div>
                        </div>

                    </div>

                    <div className="configure afclr">
                        <h3>Configure & Price</h3>

                    </div>

                    <div className="sizing_block afclr">
                        <div className="row">
                            <div className="col-lg-6">

                                <div className="size_select afclr">
                                    <h4>Size:</h4>
                                    <select>
                                        <option value="volvo">2" x 3.5" (U.S. Standard)</option>
                                        <option value="saab">2" x 3.7" (U.S. Standard)</option>
                                        <option value="opel">2" x 3.9" (U.S. Standard)</option>

                                    </select></div>
                                <div className="size_select afclr">
                                    <h4>Paper Type:</h4>
                                    <select>
                                        <option value="volvo">14 pt. Cardstock Gloss</option>
                                        <option value="saab">15 pt. Cardstock Gloss</option>
                                        <option value="opel">16 pt. Cardstock Gloss</option>

                                    </select></div>

                                <div className="size_select afclr">
                                    <h4>Quantity:</h4>
                                    <select>
                                        <option value="volvo">100</option>
                                        <option value="saab">200</option>
                                        <option value="opel">300</option>

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

                                <div className="size_select afclr">
                                    <h4>Rounded Corners:</h4>
                                    <select>
                                        <option value="volvo">Yes</option>
                                        <option value="saab">No</option>

                                    </select></div>
                                <div className="size_select afclr">
                                    <h4>Printed Side:</h4>
                                    <select>
                                        <option value="volvo">Front Only</option>
                                        <option value="saab">Front Only</option>
                                    </select>
                                    </div>

                                <div className="size_select afclr">
                                    <h4>Printing Time: </h4>
                                    <select>
                                        <option value="volvo">3 Busineess Day</option>
                                        <option value="saab">4 Busineess Day</option>
                                        <option value="opel">5 Busineess Day</option>

                                    </select>
                                </div>
                            </div>
                        </div>
                        <div className="product_total afclr">
                            <h5>Total Cost: <span>$9.00</span></h5>
                            <div className="order_button afclr"><a href="#">Order Now</a></div>
                        </div>

                    </div>
                </div>
            </div>
    );
  }
}