'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);

    const getButtonStyle = (key) => {
        if (activeCategory === key) {
            return {
                cursor: "pointer",
                backgroundColor: "#bc0000",
                color: "#fff",
                border: "1px solid #bc0000",
            };
        } else {
            return {
                cursor: "pointer",
                color: "black",
                border: "1px solid #102548",
                backgroundColor: "transparent",
            };
        }
    };

    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`}
                                onClick={() => setActiveCategory(cat.key)}
                                style={getButtonStyle(cat.key)}
                            >
                                {cat.label}
                            </li>
                        ))}
                    </ul>

                    <ul className="filter-tabs filter-btns clearfix">
                        {secondRow.map((cat) => (
                            <li
                                key={cat.key}
                                className={`filter`}
                                onClick={() => setActiveCategory(cat.key)}
                                style={getButtonStyle(cat.key)}
                            >
                                {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">
                                        <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>
    );
}