'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 (
 
        <>
        {/*===== BLOG AREA STARTS =======*/}
        <div className="blog-details-section sp1">
            <div className="container">
                <div className="row">
                      <div className="col-lg-3">
                        <div className="space30 d-lg-none d-block" />
                        <div className="blog-auhtor-details">
                            <div className="blog-categories">
                                <h3>Business Directory</h3>
                                <div className="space12" />
                                <ul>
            {categories.map((cat) => (
              <li key={cat}>
                <button
                  className={`category-btn${selectedCategory === cat ? " active" : ""}`}
                  onClick={() => setSelectedCategory(cat)}
                >
                  {cat}<span><i className="fa-solid fa-angle-right" /></span>
                </button>
              </li>
            ))}
          </ul>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-9">
                       
                        	<div className="schedule-section-area sp10">
						<div className="container">
							<div className="row">
								<div className="col-lg-11 m-auto">
									<div className="schedule">
										 <table>
                                        <thead>
                                        <tr>
                                            {tableHeaders.map((header) => (
                                            <th key={header}>{header}</th>
                                            ))}
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {(directoryData[selectedCategory] || []).length === 0 ? (
                                            <tr>
                                            <td colSpan={6} style={{ textAlign: "center" }}>
                                                No data available for this category.
                                            </td>
                                            </tr>
                                        ) : (
                                            directoryData[selectedCategory].map((row, idx) => (
                                            <tr key={idx}>
                                                <td>{row.services}</td>
                                                <td>{row.name}</td>
                                                <td>{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>
                  
                </div>
            </div>
        </div>
        {/*===== BLOG AREA ENDS =======*/}

        </>
    )
}