"use client";

import visaData from "./visa.json";
import Breadcrumb from "./components/Breadcrumb";

const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";

interface VisaCountry {
  id: number;
  name: string;
  icon: string;
  services: string[];
}

const visaCountries: VisaCountry[] = visaData.visaSystem.summaryList.map(
  (country) => ({
    ...country,
    icon: `${ASSET_URL}/${country.icon}`,
  }),
);

export default function VisaListPage() {
  const getSlug = (countryName: string): string => {
    return countryName.toLowerCase().replace(/\s+/g, "-");
  };

  return (
    <>
      {/* Breadcrumb-Wrapper Section Start */}
      <Breadcrumb
        title={visaData.visaSystem.breadcrumb.list.title}
        breadcrumbItems={[
          { label: "Home", href: "/" },
          { label: visaData.visaSystem.breadcrumb.list.title },
        ]}
        backgroundImage={`${ASSET_URL}/${visaData.visaSystem.breadcrumb.list.image}`}
      />

      {/* Service Section Start */}
      <section className="visa-provide-section section-padding section-bg-1 fix">
        <div className="container">
          <div className="row g-4">
            {visaCountries.map((country) => (
              <div key={country.id} className="col-lg-6">
                <div className="visa-provide-box mt-0">
                  <div className="visa-top-item">
                    <div className="visa-left">
                      <div className="icon">
                        <img src={country.icon} alt="img" />
                      </div>
                      <div className="content">
                        <p>Visa Service</p>
                        <h3>
                          <a href={`/visa/${getSlug(country.name)}`}>
                            {country.name}
                          </a>
                        </h3>
                      </div>
                    </div>
                    <a
                      href={`/visa/${getSlug(country.name)}`}
                      className="theme-btn"
                    >
                      Read More
                      <i className="fa-solid fa-arrow-right"></i>
                    </a>
                  </div>
                  <div className="visa-list-item">
                    <ul className="list">
                      <li>
                        <i className="fa-regular fa-arrow-right"></i>
                        {country.services[0]}
                      </li>
                      <li>
                        <i className="fa-regular fa-arrow-right"></i>
                        {country.services[1]}
                      </li>
                    </ul>
                    <ul className="list">
                      <li>
                        <i className="fa-regular fa-arrow-right"></i>
                        {country.services[2]}
                      </li>
                      <li>
                        <i className="fa-regular fa-arrow-right"></i>
                        {country.services[3]}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}