"use client";

import Image from "next/image";
import Link from "next/link";
import BookAnAppointmentModal from "@/components/CommonComponent/BookAppointmentModal";
import BlueArrowUpRight from "../../../../../public/images/blue-arrow-up-right.svg";
import WhiteArrow from "../../../../../public/images/white-arrow.svg";
import { ClinicSpecialistDetailsProps } from "@/types/aesthetic-surgery";

export default function WhatWeOfferAesthetic({
    heading,
    description,
    tabs = [],
    treatment_question,
    cta_text,
    columns,
}: ClinicSpecialistDetailsProps) {
    if (!heading && (!tabs || tabs.length === 0)) return null;

    // Flatten the cards from the tabs. Each tab corresponds to one procedure card.
    const cards = tabs?.flatMap((tabItem) => tabItem?.specialist_card || []) || [];
    const gridColsClass = columns === 3 ? "xl:grid-cols-3" : "xl:grid-cols-4";

    return (
        <section className="bg-white mb-16 md:mb-20 xl:mb-30">
            <div className="container mx-auto px-4 max-w-7xl">
                {/* Header Section */}
                <div className="text-left md:text-center mb-10 md:mb-16 max-w-[800px] mx-auto">
                    <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium tracking-[1.5px] uppercase block mb-3">
                        OUR PROCEDURES
                    </span>
                    <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.2] tracking-[-0.5px] mb-4 [text-wrap:balance]">
                        {heading}
                    </h2>
                    <p className="text-[16px] md:text-[18px] xl:text-[20px] text-[#334D72] leading-relaxed font-normal [text-wrap:balance]">
                        {description}
                    </p>
                </div>

                {/* Cards Container: Snap scrolling on mobile, grid on larger screens */}
                <div className={`flex overflow-x-auto md:grid md:grid-cols-2 ${gridColsClass} gap-4 md:gap-6 snap-x snap-mandatory scroll-smooth -mx-4 px-4 md:mx-0 md:px-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden pb-3`}>
                    {cards.map((card, index) => (
                        <article
                            key={index}
                            className="w-[82vw] sm:w-[48vw] md:w-auto shrink-0 snap-center md:shrink flex flex-col bg-white border border-[#E5E9ED] rounded-[16px] overflow-hidden hover:shadow-lg transition-all duration-300"
                        >
                            {/* Card Image using next/image with proper aspect ratio */}
                            <figure className="relative w-full aspect-[280/200] overflow-hidden shrink-0">
                                <Image
                                    src={card.image}
                                    alt={card.name}
                                    fill
                                    sizes="(max-width: 768px) 80vw, (max-width: 1024px) 45vw, 22vw"
                                    priority={index < 2}
                                    className="object-cover object-center"
                                />
                                {
                                    card.tags &&
                                    <span className="absolute right-[16px] top-[16px] text-[14`px] text-[#1718FF] font-bold bg-white px-4 py-1 rounded-[100px]">{card.tags}</span>
                                }
                            </figure>

                            {/* Card Details */}
                            <div className="p-5 md:p-6 flex flex-col flex-grow">
                                <div className="flex items-center justify-between mb-3 gap-2">
                                    <h3 className="text-[18px] md:text-[20px] font-bold text-[#00204F] leading-snug">
                                        {card.cta_link ? (
                                            <Link href={card.cta_link} className="hover:text-[#1718F5] transition-colors duration-300">
                                                {card.name}
                                            </Link>
                                        ) : (
                                            card.name
                                        )}
                                    </h3>
                                    {/* Circular Up-Right Arrow Icon */}
                                    {card.cta_link && (
                                        <Link href={card.cta_link} className="w-8 h-8 rounded-full bg-[#E8EEFF] flex items-center justify-center shrink-0 hover:bg-[#D4E6FF] transition-colors duration-300">
                                            <Image
                                                src={BlueArrowUpRight}
                                                width={14}
                                                height={14}
                                                alt="Explore procedure"
                                            />
                                        </Link>
                                    )}
                                </div>

                                {/* Rich Text/HTML Description from CMS */}
                                <div
                                    dangerouslySetInnerHTML={{ __html: card.description }}
                                    className="text-[14px] md:text-[16px] text-[#334D72] leading-relaxed font-medium flex-grow "
                                />
                            </div>
                        </article>
                    ))}
                </div>

                {/* Bottom Call-To-Action (CTA) Section */}
                <div className="text-center mt-12 md:mt-16 xl:mt-20">
                    <h4 className="text-[24px] xl:text-[32px] font-bold text-[#00204F] mb-6">
                        {treatment_question}
                    </h4>
                    <BookAnAppointmentModal
                        buttonBgClass="bg-[#1718FF]"
                        buttonTextClass="text-white hover:bg-[#0010DB]"
                        buttonText={cta_text}
                        arrowIcon={WhiteArrow}
                        className="shadow-sm hover:shadow-md transition-all duration-300"
                    />
                </div>
            </div>
        </section>
    );
}