import React, { useState } from "react";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { motion } from "framer-motion";
import Image from "next/image.js";
import { Accordion, Button, Form } from "react-bootstrap";
import { cleanImage } from "../../services/imageHandling.js";
export const BlogData = [
{
image: "/images/blogs/01.png",
title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read",
flag:"Adventure"
},
{
image: "/images/blogs/02.png",
title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read",
flag:"Adventure"
},
{
image: "/images/blogs/03.png",
title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read",
flag:"Art & History"
},
{
image: "/images/blogs/01.png",
title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read",
flag:"Adventure"
},
{
image: "/images/blogs/02.png",
title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read",
flag:"Adventure"
},
{
image: "/images/blogs/03.png",
title: "13 MOST Unique Places to Stay in Washington State",
discription: "Undoubtedly, the most unique places to stay........",
read: "10-15 Read",
flag:"Art & History"
}
];
const BlogsItem = ({blogs}) => {
const [showContent, setShowContent] = useState(false);
const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const toggleContent = () => {
setShowContent(!showContent);
};
const toggleGridViewDropdown = () => {
setIsGridViewOpen(!isGridViewOpen);
};
const toggleFilterViewDropdown = () => {
setIsFilterViewOpen(!isFilterViewOpen);
};
const toggleDropdown = () => {
setIsOpen(!isOpen);
};
return (
<section className="blogs-session">
<div className="container">
<div className="row">
<div className="col-12">
<div className="head-btn">
<motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
<div className="head01">
<div className="title">Most Read</div>
<h2>Blogs</h2>
</div>
</motion.div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="blogs-filter">
<a onClick={toggleGridViewDropdown}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/filter-icon.svg" />
</span>
</a>
<div className={`inner-content ${isGridViewOpen ? "open" : ""}`}>
<div className="top-head">
<div className="">Select</div>
<div className="close-btn" onClick={toggleGridViewDropdown}>
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/close-icon.svg" />
</span>
</div>
</div>
<div className="listing-filter">
<div className="box-01">
<div className="inner">
<Accordion className="accordion-filter" defaultActiveKey="0" flush>
<Accordion.Item eventKey="0">
<Accordion.Header>Adventure</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Helicopter">
<input id="Helicopter" type="checkbox" /> Helicopter
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Ice-skating">
<input id="Ice-skating" type="checkbox" /> Ice-skating
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Jet-skiing">
<input id="Jet-skiing" type="checkbox" /> Jet-skiing
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Kayaking">
<input id="Kayaking" type="checkbox" /> Kayaking
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Park">
<input id="Park" type="checkbox" /> Park
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Rooftop">
<input id="Rooftop" type="checkbox" /> Rooftop
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Art & History</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Experiential Dining </Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="3">
<Accordion.Header>Family</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="4">
<Accordion.Header>Fitness</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="5">
<Accordion.Header>Performing Arts</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="6">
<Accordion.Header>Pop Ups</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="7">
<Accordion.Header>Tour</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="8">
<Accordion.Header>Classes</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="9">
<Accordion.Header>Wellness</Accordion.Header>
<Accordion.Body>
<div className="data-filters-item">
<label htmlFor="Boat">
<input id="Boat" type="checkbox" /> Boat
</label>
</div>
<div className="data-filters-item">
<label htmlFor="Games">
<input id="Games" type="checkbox" /> Games
</label>
</div>
</Accordion.Body>
</Accordion.Item>
</Accordion>
</div>
</div>
<div></div>
</div>
<div className="text-center">
<Button variant="primary">Submit</Button>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-12">
<div className="row">
{blogs &&
blogs?.map(data => {
return (
<div className="col-md-4">
<div className="blog-item">
<div className="img-wrapper">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src={cleanImage(data?.attributes?.image?.data?.attributes)} />
</span>
{/* <div className="top-rated">{data?.attributes?.categories}</div> */}
</div>
<div className="info">
{/* <div className="read-row">
<span className="image-container">
<Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
</span>
<div className="">{data?.attributes?.read} Read</div>
</div> */}
<div className="title">{data?.attributes?.title}</div>
<div className="discription" dangerouslySetInnerHTML={{ __html: data?.attributes?.description }}></div>
<div className="read-more">
<Button href={`/blog/${data.attributes.slug}`} variant="primary">
Read More
</Button>
</div>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
</div>
</section>
);
};
export default BlogsItem;