/* eslint-disable @next/next/no-img-element */
import Dashboard_Chart from '@/components/Chart/Dashboard_Chart';
import DashboardLayout from '@/components/Layouts/DashboardLayout';
import Link from 'next/link';
import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// import { faHeart } from '@fortawesome/free-regular-svg-icons';
import { Card, Col, ListGroup, Row, Dropdown, Button, Container } from 'react-bootstrap';
import Image from 'react-bootstrap/Image';
import Modal from 'react-bootstrap/Modal';
import CloseButton from 'react-bootstrap/CloseButton';
import { useRouter } from 'next/router';
import WebsiteLayout from '@/components/Layouts/WebsiteLayout';

// import ToggleButton from 'react-bootstrap/ToggleButton';

const HomeCanvas = [
  {
    id: 0,
    src: '/images/Rectangle-13.png',
    title: 'Health',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },

  {
    id: 1,
    src: '/images/Rectangle-14.png',
    title: 'Education',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },

  {
    id: 3,
    src: '/images/Rectangle-15.png',
    title: 'Disaster',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },
  {
    id: 4,
    src: '/images/Rectangle-16.png',
    title: 'NGO’s',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },
  {
    id: 5,
    src: '/images/Rectangle-13.png',
    title: 'Health',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },
  {
    id: 6,
    src: '/images/Rectangle-14.png',
    title: 'Education',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },
  {
    id: 7,
    src: '/images/Rectangle-15.png',
    title: 'Disaster',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },
  {
    id: 8,
    src: '/images/Rectangle-16.png',
    title: 'NGO’s',
    rating: '4.6',
    pera: 'Lorem ipsum dolor sit amet, ipsum dolor sit amet',
    location: 'California',
  },

  // {
  //   id:9,
  //   src: "/images/home-card-2.png",
  //   title: "Gatorfoam Board"
  // },

  // {
  //   id:4,
  //   src: "/images/super-4.png"

  // }
];

export default function NgO() {
  const [modalShow, setModalShow] = React.useState(false);
  // const closeHeart = ()=>setModalShow(false)
  // const [modalShow2, setModalShow2] = React.useState(false);
  const [active, setActive] = useState(false);
  const router = useRouter();

  return (
    <>
      <WebsiteLayout>
        <div>
          <Container fluid>
            <div className="main-sect">
              <Row className="mt-3">
                <Col lg="4">
                  <button type="button" className="btn btn-primary payment w-50">
                    Go Back
                  </button>
                </Col>
                <Col lg="4">
                  <div className="direct-screen-hed">
                    <img src="/images/direct-logo.png" alt="" />
                    <h2 className="heading">Direct Relief</h2>
                  </div>
                </Col>
                <Col lg="4"></Col>
              </Row>
              <Row className="mt-5">
                <div
                  className="home-dashbaord"
                  onClick={() => router.push('/user/campaign/compaign-detail')}
                >
                  {HomeCanvas.map((data, index) => (
                    <Col key={index} lg="3">
                      <div className="card-box">
                        <Image src={data.src} className="thumbnail" alt="" />
                        <div className="home-title">
                          <h4>{data.title}</h4>
                          <h6>{data.rating}</h6>
                        </div>
                        <p>{data.pera}</p>
                        <h5>{data.location}</h5>
                      </div>
                    </Col>
                  ))}
                </div>
              </Row>
            </div>
          </Container>
        </div>
        <Likes show={modalShow} onHide={() => setModalShow(false)} />
      </WebsiteLayout>
    </>
  );
}

// Heart like modal

function Likes(props: any) {
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="likes-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        <div className="congrats">
          <img src={'/images/congrats.png'} alt="" />
          <h4 className="text-center mb-2">Congratulations</h4>
          <p>It’s a Match</p>
          <div className="likes-btn mt-5">
            <button className="btn btn-primary keep-btn" type="button">
              KEEP SWIPING
            </button>
            <button className="btn btn-primary" type="button" onClick={() => router.push('/Chat')}>
              MESSAGE HER
            </button>
          </div>
        </div>
      </Modal.Body>
    </Modal>
  );
}