'use client';
import React, { useState } from "react";
import { directoryData } from "@/utility/constant.utils";

export default function Section1() {
  const categories = Object.keys(directoryData);
  const [selectedCategory, setSelectedCategory] = useState(categories[0]);

  const tableHeaders = [
    "Services",
    "Name",
    "Phone",
    "Service Area",
    "Location",
    "Website"
  ];

  return (
    <>

      <div className="blog-details-section sp1">
        <div className="container">
          <div className="row">

            <div className="col-lg-3 mb-4">
              <div className="space30 d-lg-none d-block" />
              <div className="blog-auhtor-details">
                <div className="blog-categories">
                  <h3 className="mb-3">Business Directory</h3>
                  <div className="space12" />
                  <ul className="list-unstyled">
                    {categories.map((cat) => (
                      <li key={cat} className="mb-2">
                        <button
                          className={`category-btn w-100 text-start ${selectedCategory === cat
                            ? "active"
                            : "bg-white text-dark"
                            }`}
                          onClick={() => setSelectedCategory(cat)}
                        >
                          <span>{cat}</span>
                          <i className="fa-solid fa-angle-right" />
                        </button>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>


            <div className="col-lg-9">
              <div className="schedule-section-area sp10">
                <div className="table-responsive shadow-sm rounded">
                  <table className="table table-bordered table-striped align-middle mb-0">
                    <thead className="table-dark">
                      <tr>
                        {tableHeaders.map((header) => (
                          <th key={header} className="text-nowrap">{header}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      {(directoryData[selectedCategory] || []).length === 0 ? (
                        <tr>
                          <td colSpan={6} className="text-center py-4 text-muted">
                            No data available for this category.
                          </td>
                        </tr>
                      ) : (
                        directoryData[selectedCategory].map((row, idx) => (
                          <tr key={idx}>
                            <td style={{ minWidth: 120 }}>{row.services}</td>
                            <td style={{ minWidth: 120 }}>{row.name}</td>
                            <td style={{ whiteSpace: "nowrap" }}>{row.phone}</td>
                            <td>{row.serviceArea}</td>
                            <td>{row.location}</td>
                            <td>
                              <a
                                href={row.website}
                                target="_blank"
                                rel="noopener noreferrer"
                              >
                                Website
                              </a>
                            </td>
                          </tr>
                        ))
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </>
  );
}
