Update UI, Call API

app/visa/page.tsx

@@ -1,40 +1,52 @@
-"use client";
+// app/visa/page.tsx
 
-import visaData from "./visa.json";
-import Breadcrumb from "./components/Breadcrumb";
+import Breadcrumb from "../components/Breadcrumb";
+import { fetchVisaData, type VisaCountry } from "@/api/visa";
 
-const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";
+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;
+  }
 
-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, "-");
-  };
+  // 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={visaData.visaSystem.breadcrumb.list.title}
-        breadcrumbItems={[
-          { label: "Home", href: "/" },
-          { label: visaData.visaSystem.breadcrumb.list.title },
-        ]}
-        backgroundImage={`${ASSET_URL}/${visaData.visaSystem.breadcrumb.list.image}`}
-      />
+      <Breadcrumb title={visaHero.title} current={visaHero.title} />
 
       {/* Service Section Start */}
       <section className="visa-provide-section section-padding section-bg-1 fix">
@@ -46,45 +58,58 @@ export default function VisaListPage() {
                   <div className="visa-top-item">
                     <div className="visa-left">
                       <div className="icon">
-                        <img src={country.icon} alt="img" />
+                        <img
+                          src={country.icon}
+                          alt={country.name}
+                          loading="lazy"
+                        />
                       </div>
                       <div className="content">
                         <p>Visa Service</p>
                         <h3>
-                          <a href={`/visa/${getSlug(country.name)}`}>
-                            {country.name}
-                          </a>
+                          <a href={`/visa/${country.slug}`}>{country.name}</a>
                         </h3>
                       </div>
                     </div>
-                    <a
-                      href={`/visa/${getSlug(country.name)}`}
-                      className="theme-btn"
-                    >
+
+                    {/* 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">
-                      <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>
+                      {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">
-                      <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>
+                      {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>