import { useState } from "react";
import "../Css/WeblogBanner.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

function WeblogBanner() {
  const responsive = {
    superLargeDesktop: {
      // the naming can be any, depends on you.
      breakpoint: { max: 4000, min: 3000 },
      items: 5,
    },
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 2,
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 2,
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1,
    },
  };

  const background1 = "images/photo-1558893885-06a2e8f6ece1.jpeg";
  const background2 = "images/photo-1554057009-4bb718be3f32.jpeg";
  const background3 = "images/photo-1518145060901-fb6d403515f0.jpeg";
  const background4 = "images/photo-1562887284-eb863165ebc8.jpeg";

  const title1 = "انتخاب شنل به عنوان بهترین برند عطر سال";
  const title2 = "ارغوان، برندی جدید در محصولات آرایشی";
  const title3 = "کارخانه جدید زیبا با مساحتی حدود 20 هکتار احداث شد";
  const title4 = "با تمامی محصولات مراقبت پوستی ما آشنا شوید";

  const date1 = "یازدهم شهریور 1401";
  const date2 = "بهمن 11 1401";
  const date3 = "شهریور 11 1401";
  const date4 = "شهریور 11 1401";

  const [isHovered, setIssHovered] = useState(false);
  const [isPost1Hovered, setIsPost1Hovered] = useState(false);
  const [isPost2Hovered, setIsPost2Hovered] = useState(false);
  const [isPost3Hovered, setIsPost3Hovered] = useState(false);
  const [isPost4Hovered, setIsPost4Hovered] = useState(false);

  return (
    <div className="weblog-banner">
      <div className="posts">
        <Carousel
          responsive={responsive}
          swipeable={false}
          draggable={false}
          showDots={true}
          arrows={false}
          infinite={true}
          autoPlay={true}
          autoPlaySpeed={3000}
          keyBoardControl={true}
          dotListClass="custom-dot-list-style"
          itemClass="carousel-item-padding-40-px"
        >
          <div
            className="post-item"
            style={{
              backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url("${background1}")`,
            }}
            onMouseEnter={() => setIsPost1Hovered(true)}
            onMouseLeave={() => setIsPost1Hovered(false)}
          >
            <div
              className="post-title"
              style={{
                transform: isPost1Hovered
                  ? "translateY(-80px)"
                  : "translateY(0px)",
              }}
            >
              {title1}
            </div>

            <div
              className="post-date"
              style={{
                transform: isPost1Hovered
                  ? "translateX(-250px)"
                  : "translateX(0px)",
              }}
            >
              {date1}
              <i className="pi pi-clock"></i>
            </div>
          </div>

          <div
            className="post-item"
            style={{
              backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url("${background2}")`,
            }}
            onMouseEnter={() => setIsPost2Hovered(true)}
            onMouseLeave={() => setIsPost2Hovered(false)}
          >
            <div
              className="post-title"
              style={{
                transform: isPost2Hovered
                  ? "translateY(-80px)"
                  : "translateY(0px)",
              }}
            >
              {title2}
            </div>
            <div
              className="post-date"
              style={{
                transform: isPost2Hovered
                  ? "translateX(-250px)"
                  : "translateX(0px)",
              }}
            >
              {date2}
              <i className="pi pi-clock"></i>
            </div>
          </div>

          <div
            className="post-item"
            style={{
              backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url("${background3}")`,
            }}
            onMouseEnter={() => setIsPost3Hovered(true)}
            onMouseLeave={() => setIsPost3Hovered(false)}
          >
            <div
              className="post-title"
              style={{
                transform: isPost3Hovered
                  ? "translateY(-80px)"
                  : "translateY(0px)",
              }}
            >
              {title3}
            </div>
            <div
              className="post-date"
              style={{
                transform: isPost3Hovered
                  ? "translateX(-250px)"
                  : "translateX(0px)",
              }}
            >
              {date3}
              <i className="pi pi-clock"></i>
            </div>
          </div>

          <div
            className="post-item"
            style={{
              backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30)), url("${background4}")`,
            }}
            onMouseEnter={() => setIsPost4Hovered(true)}
            onMouseLeave={() => setIsPost4Hovered(false)}
          >
            <div
              className="post-title"
              style={{
                transform: isPost4Hovered
                  ? "translateY(-80px)"
                  : "translateY(0px)",
              }}
            >
              {title4}
            </div>
            <div
              className="post-date"
              style={{
                transform: isPost4Hovered
                  ? "translateX(-250px)"
                  : "translateX(0px)",
              }}
            >
              {date4}
              <i className="pi pi-clock"></i>
            </div>
          </div>
        </Carousel>
      </div>
      <div className="info">
        <h3 className="title">اخبار و مقاله های جدید</h3>
        <p className="subtitle">
          ما با حرفه ای ترین برندها کار میکنیم و همیشه از پروژه های جدید استقبال
          می کنیم
        </p>
        <span
          className="button"
          onMouseEnter={() => setIssHovered(true)}
          onMouseLeave={() => setIssHovered(false)}
        >
          <button
            style={{
              transform: isHovered ? "translateX(-20px)" : "translateX(0px)",
            }}
          >
            مشاهده کامل اخبار
          </button>
          <i
            className="pi pi-minus"
            style={{
              transform: isHovered ? "translateX(-20px)" : "translateX(0px)",
            }}
          ></i>
        </span>
      </div>
    </div>
  );
}

export default WeblogBanner;

.weblog-banner {
  height: 500px;
  background: transparent;
  position: relative;
  display: flex;
  padding: 100px 100px 50px 100px;
  text-align: right;
}

.info {
  position: relative;
  display: inline-block;
  width: 30%;
  margin-left: 50px;
}

.info h3 {
  font-size: 30px;
  margin-bottom: 50px;
}

.info p {
  margin-bottom: 50px;
}

.posts {
  position: relative;
  display: inline-block;
  width: 60%;
  margin-left: 50px;
  margin-right: 50px;
  height: 300px;
}

.weblog-banner .button {
  font-size: 18px;
  vertical-align: middle;
  color: #c9a654;
  cursor: pointer;
}

.weblog-banner .button .pi {
  margin-left: 5px;
  vertical-align: middle;
  font-weight: bold;
}

.button .pi {
  transition: transform 350ms;
}

.button button {
  color: #c9a654;
  background: transparent;
  transition: transform 350ms;
  font-weight: bold;
  font-size: 18px;
  border: 0px none;
  cursor: pointer;
}

.post-item {
  height: 350px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 50px;
  cursor: pointer;
  position: relative;
}

.react-multi-carousel-dot button {
  width: 8px !important;
  height: 8px !important;
  border-color: #a5a5a5;
  border-width: 0px !important;
  background-color: #a5a5a5;
  vertical-align: middle;
  margin: 0px 8px 0px 8px !important;
}

.react-multi-carousel-dot--active button {
  background: #ffffff !important;
  border-color: #c9a654 !important;
  width: 12px !important;
  height: 12px !important;
  border-width: 2px !important;
}

.post-item .post-title {
  color: #ffffff;
  text-align: right;
  padding: 260px 30px 0px 30px;
  font-size: 20px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 350ms;
}

.post-item .post-date {
  color: #ffffff;
  text-align: right;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 0px;
  font-size: 16px;
  transition: transform 350ms;
  padding: 260px 30px 0px 30px;
  right: 0px;
  margin-right: -250px;
}

.post-item .post-date:hover {
  transform: translateX(+100%);
}

.post-item .pi {
  vertical-align: middle;
  font-size: 16px;
  margin-left: 10px;
}

@-webkit-keyframes slide {
  100% {
    right: 0;
  }
}

@keyframes slide {
  100% {
    right: 0;
  }
}

/*سایز موبایل*/
@media only screen and (max-width: 768px) {
  .weblog-banner {
    display: table !important;
    padding: 0px 0px 0px 0px !important;
  }
  .posts , .info
  {
    width: 100% !important;
    margin: 0px !important;
    display: table !important;
  }

  
}

/*سایز موبایل*/
@media only screen and (max-width: 768px)
{
.posts{
  display: grid !important;

  }
  .weblog-banner
  {
    padding: 50px 20px 0px 20px !important;
  }
  .info
  {
    padding:30px 10px 0px 10px !important
  }
}