import Location from "./Location";
import Review from "./Review";
import { BookingForm } from "@/pages/search";



const OverviewDetails = ({ hotelDetail }: { hotelDetail: any }) => {

  // console.log(hotelDetail)
  return (
    <div className="container mt-4">
      <div className="row">
        <div className="col-md-8 mt-3">
          <Location location={hotelDetail?.location} />
          <br />
          <h2> Seva (Amenities)</h2>
          <br />
          <ul className="ameties-outer">

            {
              hotelDetail?.amenities?.length > 0 && hotelDetail?.amenities?.map((ame: any, index: number) => {
                return (

                  <li className="dte-tym-prid" key={index}>{ame}</li>
                )
              })
            }

          </ul>

          <div className="overview-info-dtls mt-4">
            <h2>About This Dhaam </h2>
            <div dangerouslySetInnerHTML={{ __html: hotelDetail?.description as any }}></div>
          </div>

          <Review
            ratings={hotelDetail?.ratings}
          />
        </div>
        <div className="col-md-4 mt-5">
          <h2>Booking Form </h2>
          <BookingForm hotel={hotelDetail} handleCloseModal={() => { console.log('close') }} />
        </div>
      </div>
    </div>
  );
};

export default OverviewDetails;

const OverItemIcon = (props: any) => {
  return (
    <>
      <div className="d-flex">
        {/* <div className="over-icon-views">
          <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJyO4tpP7HLeuH6xTLYRDzy02OQjKdiF9DH00S5lhN8w&s"
            alt="icon"
            className="img-fluid"
          />
        </div> */}
        <div className="ms-3">

          <p className="dte-tym-prid">{props.details}</p>
        </div>
      </div>
    </>
  );
};