import Image from 'next/image';
import { ClinicFacilitiesProps } from "@/types/clinic-buelle";

export default function ClinicFacilities({ heading, description, facilities }: ClinicFacilitiesProps) {
    // Separate transit directions and clinic facilities blocks based on the CMS API payload
    const howToGetThere = facilities?.[0];
    const clinicFacilities = facilities?.[1];

    return (
        <section className='mb-16 md:mb-24 xl:mb-30'>
            <div className="container">
                <div className="grid grid-cols-12 gap-y-8 md:gap-x-12">
                    {/* Left Column: Heading and Description */}
                    <div className="col-span-12 md:col-span-6">
                        <h2 className="text-[32px] xl:text-[48px] text-[#00204F] font-medium leading-[1.2] max-w-[530px] mb-4 md:mb-6">
                            {heading}
                        </h2>
                        <p className="text-[18px] xl:text-[20px] text-[#334D72] font-normal leading-relaxed max-w-[530px]">
                            {description}
                        </p>
                    </div>

                    {/* Right Column: Dynamic Blocks */}
                    <div className="col-span-12 md:col-span-6">
                        {/* Section 1: Transit/Driving Directions */}
                        {howToGetThere && (
                            <div className="pb-6 mb-6 md:pb-8 md:mb-8 border-b border-[#E5E9ED]">
                                {
                                    howToGetThere.title &&
                                    <h4 className="text-[18px] md:text-[24px] text-[#00204F] font-bold leading-[1.3] mb-4 md:mb-6">
                                        {howToGetThere.title}
                                    </h4>
                                }

                                <div className="flex flex-col gap-5">
                                    {howToGetThere.facility_detail?.map((detail, index) => (
                                        <div className="flex items-start gap-4" key={index}>
                                            {detail.icon ? (
                                                <figure className='w-12 h-12 rounded-[40px] bg-[#E8F1FF] flex items-center justify-center shrink-0'>
                                                    <Image
                                                        src={detail.icon}
                                                        alt={detail.subtitle || detail.description || "Transit direction icon"}
                                                        width={24}
                                                        height={24}
                                                        className="object-contain"
                                                    />
                                                </figure>
                                            ) : (
                                                /* Spacer element for left margin alignment if icon is absent */
                                                <div className="w-12 shrink-0" />
                                            )}
                                            <div className="flex-1 pt-1">
                                                <h5 className="text-[16px] md:text-[16px] font-bold text-[#00204F] mb-1">
                                                    {detail.subtitle}
                                                </h5>
                                                {detail.description && (
                                                    <p className="text-[14px] md:text-[16px] text-[#334D72] leading-normal">
                                                        {detail.description}
                                                    </p>
                                                )}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}

                        {/* Section 2: Clinic Facilities Lists */}
                        {clinicFacilities && (
                            <div>
                                <h4 className="text-[18px] md:text-[24px] text-[#00204F] font-bold leading-[1.3] mb-6">
                                    {clinicFacilities.title}
                                </h4>
                                <div className="grid grid-cols-12 gap-y-4 gap-x-6">
                                    {clinicFacilities.facility_detail?.map((detail, index) => (
                                        <div className='col-span-12 sm:col-span-6' key={index}>
                                            <div className="flex items-center gap-3.5">
                                                {detail.icon && (
                                                    <figure className="shrink-0">
                                                        <Image
                                                            src={detail.icon}
                                                            alt={detail.subtitle || "Facility icon"}
                                                            width={24}
                                                            height={24}
                                                            className="object-contain"
                                                        />
                                                    </figure>
                                                )}
                                                <div className="flex-1">
                                                    {
                                                        detail.subtitle &&
                                                        <p className="text-[15px] md:text-[16px] text-[#334D72] font-semibold">
                                                            {detail.subtitle}
                                                        </p>
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </section>
    );
}