import { useEffect, useState } from 'react'

import { get } from '@/api1/apiUtils';
import CustomImage from '@/helper/customImage';
import Link from 'next/link';
import { titleToSlug } from '@/helper/titleToSlug';
import EmblaCarousel from '@/views/carousel/EmblaCarousel';



const PropertyBox = () => {
  return (
    <div className="container-fluid-1">
      <div className='property-box-vw'>
        <div>
          <h6 style={{ color: 'rgb(224, 6, 6)' }}><b>Ayodhya nearby</b></h6>
          <h2><b>CheckOut The Cheapest Hotel</b></h2>
        </div>
        {/* <div>
          <button className='feat-explr-btns'>EXPLORE ALL <i className="bi bi-arrow-right"></i></button>
        </div> */}
      </div>

      <PropertyBoxDetails />

    </div>
  )
};

export default PropertyBox;

const PropertyBoxDetails = () => {
  const [hotelList, setHotelList] = useState([]);

  useEffect(() => {

    async function fetchHotelList() {
      const res = await get("/hotels/cheap") as any;
      // console.log(res?.results);
      setHotelList(res?.results)
    }

    fetchHotelList();

  }, []);




  return (
    <EmblaCarousel slides={hotelList} />
  )
}

export const SliderBoxImage = ({ data }: { data: any }) => {


  return (

    <Link href={`/${data?.id}/${titleToSlug(data?.hotel_name)}`} style={{ margin: '8px', cursor: 'pointer' }} key={data?.id} className='slider-card-outer'>
      <div className="slder-contentbox">
        <CustomImage
          src={data?.images[0]} alt="slider-image" className='img-fluid slder-boximgsize'
        />


        <div className="top-right">
          <h6 className='mt-2' style={{ fontSize: '14px', fontWeight: '500' }}>10% OFF</h6>
        </div>
        <div className="bottom-left">
          <h6 className='mt-1'>From : ₹{data?.lowest_price}/night</h6>
        </div>
      </div>
      <div className='d-flex'>
        <p className='sldr-imgdesrpt'><i className="bi bi-houses-fill" style={{ color: 'var(--primary-color)' }}></i> {data?.total_rooms} Rooms</p>
        <p className='sldr-imgdesrpt ms-2'><i className="bi bi-people-fill" style={{ color: 'var(--primary-color)' }}></i> {data?.total_capacity} Guests</p>
      </div>

      <h3 className='slder-title-sz'>{data?.hotel_name}</h3>
      <p className='slder-para-titlefnt d-flex gap-10px'>
        {
          data?.amenities?.length > 0 && data?.amenities?.slice(0, 2).map((am: any) => {
            return (
              <p className='sldr-imgdesrpt'>{am}</p>
            )
          })
        }

      </p>
    </Link>

  )
}