'use client';
import Link from "next/link";
import { useState } from "react";
import { locations, locationsItem } from "@/utils/constant.utils";

export default function PortfolioFilter1() {
    const [activeCategory, setActiveCategory] = useState("all");

    const filteredItems =
        activeCategory === "all"
            ? locationsItem
            : locationsItem.filter(item =>
                Array.isArray(item.categories) && item.categories.includes(activeCategory)
            );
    const firstRow = locations.slice(0, 3);
    const secondRow = locations.slice(3, 7);
    return (
        <>
            <section className="news-section">
                <div className="auto-container">

                    <div className="filters centred mb_60">
                        <ul className="filter-tabs filter-btns clearfix" style={{ marginBottom: "15px" }}>
                            {firstRow.map((cat) => (
                                <li
                                    key={cat.key}
                                    className={`filter ${activeCategory === cat.key ? "active" : ""}`}
                                    onClick={() => setActiveCategory(cat.key)}
                                    style={{ cursor: "pointer" }}
                                >
                                    {cat.label}
                                </li>
                            ))}
                        </ul>

                        <ul className="filter-tabs filter-btns clearfix">
                            {secondRow.map((cat) => (
                                <li
                                    key={cat.key}
                                    className={`filter ${activeCategory === cat.key ? "active" : ""}`}
                                    onClick={() => setActiveCategory(cat.key)}
                                    style={{ cursor: "pointer" }}
                                >
                                    {cat.label}
                                </li>
                            ))}
                        </ul>
                    </div>

                    <div className="row clearfix">
                        {filteredItems.length > 0 ? (
                            filteredItems.map((item, i) => (
                                <div key={item.id} className="col-lg-4 col-md-6 col-sm-12 news-block">
                                    <div
                                        className="news-block-one wow fadeInUp animated"
                                        data-wow-delay={`${i * 300}ms`}
                                        data-wow-duration="1500ms"
                                    >
                                        <div className="inner-box">
                                            {/* <figure className="image-box">
                                                <Link href={item.link}>
                                                    <img src={item.image} alt={item.title || `Gallery ${item.id}`} />
                                                </Link>
                                            </figure> */}

                                            <div className="lower-content2">
                                                <h2 className="mb-3" style={{ color: "#bc0000" }}>
                                                    {item.title || "Gallery Title"}
                                                </h2>
                                                <div
                                                    dangerouslySetInnerHTML={{
                                                        __html: item.description
                                                            ? item.description
                                                            : "This is a short description of the gallery item.",
                                                    }}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))
                        ) : (
                            <div className="col-12 centred">
                                <p>No items found in this category.</p>
                            </div>
                        )}
                    </div>
                </div>
            </section>
        </>
    );
}