uldp.edu.vn/app/visa/[slug]/VisaDetail.tsx

import React from "react";
import Breadcrumb from "../../components/Breadcrumb";
import { type VisaCountry } from "@/api/visa";

interface VisaDetailProps {
  country: VisaCountry;
}

export default function VisaDetail({ country }: VisaDetailProps) {
  // 1. Kiểm tra an toàn (Null Check)
  // Vì detailedView có kiểu là 'DetailedView | undefined', ta phải chắc chắn nó tồn tại
  if (!country || !country.detailedView) {
    return (
      <div className="section-padding text-center">
        <h3>Đang tải dữ liệu...</h3>
      </div>
    );
  }

  const { name: rootName, detailedView } = country;

  // 2. Bóc tách dữ liệu sau khi đã kiểm tra detailedView tồn tại
  const {
    activeCountry: countryData,
    relatedCountries,
    contactInfo,
  } = detailedView;

  return (
    <>
      <Breadcrumb title={rootName} current={rootName} />

      <section className="country-details-section section-padding fix">
        <div className="container">
          <div className="country-details-wrapper">
            <div className="row g-4">
              <div className="col-lg-8">
                <div className="country-details-post">
                  <div className="details-image">
                    <img src={countryData.mainImage} alt="img" />
                  </div>
                  <div className="country-details-content">
                    <h2>{countryData.name}</h2>
                    <p>{countryData.description}</p>
                    <p className="mt-3">{countryData.additionalInfo}</p>
                    <h5>{countryData.tagline}</h5>

                    {/* Visa Types */}
                    <div className="tourist-visa-box">
                      {countryData.visaTypes?.map((type: any, idx: number) => (
                        <div
                          key={idx}
                          className={`tourist-box ${idx === 0 ? "style-2" : ""}`}
                        >
                          {type.items.map((item: any, itemIdx: number) => (
                            <div key={itemIdx} className="tourist-content">
                              <h5>{item.title}</h5>
                              <p>{item.description}</p>
                            </div>
                          ))}
                        </div>
                      ))}
                    </div>

                    {/* Visa Process */}
                    {countryData.visaProcess && (
                      <>
                        <h3 className="text">
                          {countryData.visaProcess.title}
                        </h3>
                        <ul className="list-item">
                          {countryData.visaProcess.steps.map(
                            (process: any, idx: number) => (
                              <li key={idx}>
                                <strong>
                                  {process.number}. {process.title}
                                </strong>
                                <span>{process.description}</span>
                              </li>
                            ),
                          )}
                        </ul>
                      </>
                    )}

                    {/* Gallery */}
                    {countryData.gallery && countryData.gallery.length > 0 && (
                      <div className="row g-4 mb-4">
                        {countryData.gallery.map(
                          (image: string, idx: number) => (
                            <div key={idx} className="col-lg-6">
                              <div className="thumb">
                                <img src={image} alt="gallery-img" />
                              </div>
                            </div>
                          ),
                        )}
                      </div>
                    )}
                  </div>
                </div>
              </div>

              {/* Sidebar */}
              <div className="col-lg-4">
                <div className="country-details-sideber">
                  {relatedCountries?.map((relCountry: any, idx: number) => (
                    <div key={idx} className="icon-box-item">
                      <div className="left-item">
                        <div className="icon">
                          <img src={relCountry.icon} alt="img" />
                        </div>
                        <h5>{relCountry.name}</h5>
                      </div>
                      <i className="fa-solid fa-chevrons-right"></i>
                    </div>
                  ))}

                  {/* Contact Box */}
                  {contactInfo && (
                    <div
                      className="visa-contact-box bg-cover"
                      style={{
                        backgroundImage: `url(${contactInfo.img})`,
                        padding: "30px",
                        borderRadius: "8px",
                        color: "white",
                      }}
                    >
                      <div className="content">
                        <h3>{contactInfo.sectionTitle}</h3>
                        <p>{contactInfo.helpText}</p>
                        <div className="icon-item">
                          <div className="icon">
                            <i className="fa-solid fa-phone"></i>
                          </div>
                          <div className="cont">
                            <span>{contactInfo.phone.label}: </span>
                            <h6>
                              <a
                                href={contactInfo.phone.link}
                                style={{ color: "white" }}
                              >
                                {contactInfo.phone.value}
                              </a>
                            </h6>
                          </div>
                        </div>
                        {/* Email */}
                        <div className="icon-item">
                          <div className="icon">
                            <i className="fa-regular fa-envelope"></i>
                          </div>
                          <div className="cont">
                            <span>{contactInfo.email.label}: </span>
                            <h6>
                              <a href={contactInfo.email.link}>
                                {contactInfo.email.value}
                              </a>
                            </h6>
                          </div>
                        </div>

                        {/* Location */}
                        <div className="icon-item">
                          <div className="icon">
                            <i className="fa-regular fa-location-dot"></i>
                          </div>
                          <div className="cont">
                            <span>{contactInfo.location.label}: </span>
                            <h6>{contactInfo.location.address}</h6>
                          </div>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}