// app/visa/page.tsx

import Breadcrumb from "../components/Breadcrumb";
import { fetchVisaData, type VisaCountry } from "@/api/visa";

// Force dynamic rendering - không cache
export const dynamic = 'force-dynamic';

export default async function VisaListPage() {
  // Fetch all visa countries từ API
  let visaCountries: any[] = [];
  let visaHero: any = {};
  const visaTitle = "Visa Services";
  const breadcrumbCurrent = "Visa Services";
  let error: string | null = null;
  try {
    const visaData = await fetchVisaData();
    visaCountries = visaData.hero.summaryList.map((country: VisaCountry) => ({
      ...country,
      icon: country.icon,
    }));
    visaHero = visaData.hero;
  } catch (err) {
    const errorMessage = err instanceof Error ? err.message : String(err);
    console.error("Error fetching visa countries:", errorMessage);
    error = errorMessage;
  }

  // Fallback message nếu có error
  if (error && visaCountries.length === 0) {
    return (
      <>
        <Breadcrumb title={visaTitle} current={breadcrumbCurrent} />
        <section className="visa-provide-section section-padding section-bg-1 fix">
          <div className="container">
            <div className="row">
              <div className="col-12 text-center">
                <p className="text-danger">
                  Error loading visa services: {error}
                </p>
              </div>
            </div>
          </div>
        </section>
      </>
    );
  }

  return (
    <>
      {/* Breadcrumb-Wrapper Section Start */}
      <Breadcrumb title={visaHero.title} current={visaHero.title} />

      {/* 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={country.name}
                          loading="lazy"
                        />
                      </div>
                      <div className="content">
                        <p>Visa Service</p>
                        <h3>
                          <a href={`/visa/${country.slug}`}>{country.name}</a>
                        </h3>
                      </div>
                    </div>

                    {/* Read More Button */}
                    <a href={`/visa/${country.slug}`} className="theme-btn">
                      Read More
                      <i className="fa-solid fa-arrow-right"></i>
                    </a>
                  </div>
                  {/* Services List */}
                  <div className="visa-list-item">
                    {/* First Column */}
                    <ul className="list">
                      {country.services[0] && (
                        <li>
                          <i className="fa-regular fa-arrow-right"></i>
                          {country.services[0]}
                        </li>
                      )}
                      {country.services[1] && (
                        <li>
                          <i className="fa-regular fa-arrow-right"></i>
                          {country.services[1]}
                        </li>
                      )}
                    </ul>

                    {/* Second Column */}
                    <ul className="list">
                      {country.services[2] && (
                        <li>
                          <i className="fa-regular fa-arrow-right"></i>
                          {country.services[2]}
                        </li>
                      )}
                      {country.services[3] && (
                        <li>
                          <i className="fa-regular fa-arrow-right"></i>
                          {country.services[3]}
                        </li>
                      )}
                    </ul>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}