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) {
  const { name: rootName, detailedView } = country;
  const {
    activeCountry: countryData,
    relatedCountries,
    contactInfo,
  } = country.detailedView;

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

      {/* Country-details Section Start */}
      <section className="country-details-section section-padding fix">
        <div className="container">
          <div className="country-details-wrapper">
            <div className="row g-4">
              {/* Main Content */}
              <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">
                      {/* Render mảng đầu tiên (index 0) */}
                      {countryData.visaTypes?.[0] && (
                        <div className="tourist-box style-2">
                          {countryData.visaTypes[0].items.map(
                            (item: any, itemIdx: number) => (
                              <div key={itemIdx} className="tourist-content">
                                <h5>{item.title}</h5>
                                <p>{item.description}</p>
                              </div>
                            ),
                          )}
                        </div>
                      )}

                      {/* Render mảng thứ hai (index 1) */}
                      {countryData.visaTypes?.[1] && (
                        <div className="tourist-box">
                          {countryData.visaTypes[1].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>
                    )}

                    {/* Visa Categories */}
                    {countryData.visaCategories && (
                      <>
                        <h3 className="text mb-3">
                          {countryData.visaCategories.title}
                        </h3>

                        {countryData.visaCategories.steps.map(
                          (subGroup: string[], groupIdx: number) => (
                            <ul className="visa-list-2" key={groupIdx}>
                              {subGroup.map((category: string, idx: number) => (
                                <li key={idx}>
                                  <i className="fa-solid fa-chevrons-right"></i>
                                  {category}
                                </li>
                              ))}
                            </ul>
                          ),
                        )}
                      </>
                    )}

                    {/* Service Options */}
                    {countryData.visaService && (
                      <>
                        <h3 className="text">
                          {countryData.visaService.title}
                        </h3>
                        <ul className="list-item">
                          {countryData.visaService.steps.map(
                            (process: any, idx: number) => (
                              <li key={idx}>
                                <strong>
                                  {process.number}. {process.title} -
                                </strong>
                                <span> {process.description}</span>
                              </li>
                            ),
                          )}
                        </ul>
                      </>
                    )}
                  </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>

                        {/* Phone */}
                        <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}>
                                {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>
    </>
  );
}