// import image1 from '../explore-category/building.png';

interface Category {
  name: string;
  total: string;
  img: string;
  url: string;
  download: boolean;
}


const cate: Category[] = [
  {
    name: 'Hotel',
    total: '20',
    img: 'https://example.com/images/hotel.jpg',
    url: '#',
    download: false
  },
  {
    name: 'Homestay',
    total: '15',
    img: 'https://example.com/images/homestay.jpg',
    url: '#',
    download: false
  },
  {
    name: 'Ayodhya Gifts',
    total: '30',
    img: 'https://example.com/images/ayodhya_gifts.jpg',
    url: '#',
    download: false
  },
  {
    name: 'Blogs',
    total: '10',
    img: 'https://example.com/images/blogs.jpg',
    url: '#',
    download: false
  },
  {
    name: 'Temples',
    total: '25',
    img: 'https://example.com/images/temples.jpg',
    url: '#',
    download: false
  },
  {
    name: 'Ayodhya Kand Pdf ',
    total: 'download',
    img: 'https://example.com/images/ramcharit_manas.jpg',
    url: '/pdf/Ayodhya-Kand2-ayodhyas.pdf',
    download: true
  },
  {
    name: 'Sunder Kand Pdf ',
    total: 'download',
    img: 'https://example.com/images/ramcharit_manas.jpg',
    url: '/pdf/sunderkand-ayodhyas.pdf',
    download: true
  },

];






const Categories = () => {
  return (
    <div className='container-fluid mt-4'>
      <div className="row">
        <div className="col-md-4">
          <div className='catgory-boxvw'>
            <h6 className='text-danger explr-cate-topvws'><b>#hotelayodhyas</b></h6>
            <h2><b>Come and Receive Blessings in Ayodhya</b></h2>
          </div>
        </div>
        <div className="col-md-8">
          <div className="row">
            {
              cate.length > 0 && cate.map((c: Category) => {
                // console.log(c)
                return (

                  <ExploreBox name={c.name} total={c.total} img={c.img} url={c?.url} download={c.download} />

                )
              })
            }

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

export default Categories;

const ExploreBox = (props: Category) => {
  return (

    <a className="col-6 col-md-4 mt-3" href={props?.url} download={props.download}>
      <div className='cate-box-vws'>
        <div>
          {/* <CustomImage src={props.img} />
            <img /> */}
        </div>
        <h5 className='mt-1'><b>{props.name}</b></h5>
        <p className='text-muted'><b>({props.total})</b></p>
      </div>
    </a>

  )
}