"use client";
import { useState } from "react";
import { projectsData } from "@/data/projects";
import React from "react";
import Image from "next/image";
import AnimatedText from "../common/AnimatedText";

const tabOptions = [
  { key: "desiccated", label: "Desiccated Coconut" },
  { key: "virgin", label: "Virgin Coconut Oil" },
  { key: "pare", label: "Pare Water Processing" },
];

export default function ProjectsData() {
  const [activeTab, setActiveTab] = useState("desiccated");

  const filteredProjects = projectsData.filter(
  (project) =>
    project.category &&
    project.category.toLowerCase().includes(activeTab)
);


  return (
    <section className="project-section section-padding fix">
      <div className="container">
        <div className="section-title text-center">
          <h6 className="wow fadeInUp">
            <i className="fa-regular fa-arrow-left-long" />
            Projects
            <i className="fa-regular fa-arrow-right-long" />
          </h6>
          <h2 className="splt-txt wow">
            <AnimatedText text="projects" />
          </h2>

          {/* Tabs */}
          <div className="project-tabs mt-4 d-flex justify-content-center gap-4">
            {tabOptions.map((tab) => (
              <button
                key={tab.key}
                onClick={() => setActiveTab(tab.key)}
                className={`nav-link ${
                  activeTab === tab.key ? "active fw-bold text-dark" : ""
                }`}
                style={{
                  border: "none",
                  background: "transparent",
                  fontSize: "1rem",
                  position: "relative",
                }}
              >
                {tab.label}
                {activeTab === tab.key && (
                  <div
                    style={{
                      height: "3px",
                      backgroundColor: "#ff5502",
                      width: "100%",
                      position: "absolute",
                      bottom: "-4px",
                      left: 0,
                      borderRadius: "2px",
                    }}
                  />
                )}
              </button>
            ))}
          </div>
        </div>

        <div className="row g-4 mt-5">
          {filteredProjects.map((project) => (
            <div
              key={project.id}
              className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
              data-wow-delay={project.delay}
            >
              <div className="project-card-items">
                <div className="project-image">
                  {project.images.map((image, index) => (
                    <Image
                      key={index}
                      width={370}
                      height={331}
                      src={image}
                      alt="img"
                    />
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}