import Image from "next/image";
import { SymptomsAndIndicationsProps } from "@/types/cataract";
import BlueCtaLink from "@/ui/Button/BlueButton";
import BookAnAppointmentModal from "../BookAppointmentModal";

export default function SymptomsForCataract({ className, symptom_card, diagnosis_card }: SymptomsAndIndicationsProps) {


    return (
        <section className={`mb-16 md:mb-20 xl:mb-30 bg-white ${className || ""}`}>
            <div className="container">
                <div className="space-y-16 md:space-y-20 xl:space-y-30">

                    {/* Card 1: Symptoms & Indications */}
                    {symptom_card && (
                        <article className="grid grid-cols-12 items-center gap-y-6 md:gap-x-8 xl:gap-x-10">
                            {/* Text Column */}
                            <div className="col-span-12 md:col-span-6 flex flex-col justify-center">
                                <p className="text-[12px] md:text-[14px] text-[#334D72] font-medium uppercase tracking-[0.5px] mb-2 md:mb-3">
                                    {symptom_card.title}
                                </p>
                                <h2 className="text-[28px] md:text-[36px] xl:text-[40px] text-[#00204F] font-medium leading-[1.2] mb-3 md:mb-4">
                                    {symptom_card.heading}
                                </h2>
                                <p className="text-[16px] md:text-[20px] text-[#334D72] font-normal leading-relaxed mb-6">
                                    {symptom_card.description}
                                </p>

                                {/* Mobile Image */}
                                <div className="block md:hidden mb-6">
                                    <figure className="relative aspect-[1.3/1] overflow-hidden rounded-[20px] shadow-sm">
                                        <Image
                                            src={symptom_card.image}
                                            alt={symptom_card.heading}
                                            fill
                                            sizes="(max-width: 767px) 100vw, 50vw"
                                            className="object-cover"
                                        />
                                    </figure>
                                </div>

                                {/* Bullets */}
                                <ul className="spayce-y-2 md:space-y-4 mb-6">
                                    {symptom_card.clinic?.[0]?.points?.map((pointItem: any, idx: number) => (
                                        <li key={idx} className="text-[16px] md:text-[18px] text-[#334D72] font-medium flex items-start gap-3 leading-relaxed">
                                            <span className="mt-[0.2em] shrink-0">
                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="10" cy="10" r="10" fill="#42D0DC" />
                                                    <path d="M6 10L9 13L14 7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                                </svg>
                                            </span>
                                            <span>{pointItem.symptoms_card_clinic_details_rep_pointss}</span>
                                        </li>
                                    ))}
                                </ul>

                                {/* Additional Paragraph */}
                                {symptom_card.clinic?.[0]?.sub_text && (
                                    <p className="text-[16px] md:text-[18px] text-[#334D72] font-medium leading-relaxed mb-6 md:mb-8">
                                        {symptom_card.clinic?.[0]?.sub_text}
                                    </p>
                                )}

                                {/* CTA Link */}
                                {symptom_card.cta_text && (
                                    <div className="mt-2">
                                        {/* <BlueCtaLink href={symptom_card.cta_link || ""} children={symptom_card.cta_text} /> */}
                                        <BookAnAppointmentModal
                                            buttonText={symptom_card.cta_text}
                                            buttonBgClass="bg-[#1718FF] w-full justify-center md:w-auto"
                                            buttonTextClass="text-white"
                                        />
                                    </div>
                                )}
                            </div>

                            {/* Desktop Image */}
                            <div className="hidden md:block col-span-12 md:col-span-6">
                                <figure className="relative overflow-hidden rounded-[24px] shadow-sm">
                                    <Image
                                        src={symptom_card.image}
                                        alt={symptom_card.heading}
                                        width={610}
                                        height={740}
                                        className="w-full h-full"
                                    />
                                </figure>
                            </div>
                        </article>
                    )}

                    {/* Card 2: Diagnosis */}
                    {diagnosis_card && (
                        <article className="grid grid-cols-12 items-center gap-y-6 md:gap-x-8 xl:gap-x-10">
                            {/* Desktop Image (order-1 on desktop) */}
                            <div className="hidden md:block col-span-12 md:col-span-6 md:order-1">
                                <figure className="relative overflow-hidden rounded-[24px] shadow-sm">
                                    <Image
                                        src={diagnosis_card.image}
                                        alt={diagnosis_card.heading}
                                        width={610}
                                        height={740}
                                        className="w-full h-full"
                                    />
                                </figure>
                            </div>

                            {/* Text Column (order-2 on desktop) */}
                            <div className="col-span-12 md:col-span-6 md:order-2 flex flex-col justify-center">
                                <p className="text-[12px] md:text-[14px] text-[#334D72] font-medium uppercase tracking-[0.5px] mb-2 md:mb-3">
                                    {diagnosis_card.title}
                                </p>
                                <h2 className="text-[28px] md:text-[36px] xl:text-[40px] text-[#00204F] font-medium leading-[1.2] mb-3 md:mb-4">
                                    {diagnosis_card.heading}
                                </h2>
                                <p className="text-[16px] md:text-[20px] text-[#334D72] font-normal leading-relaxed mb-6">
                                    {diagnosis_card.description}
                                </p>

                                {/* Mobile Image */}
                                <div className="block md:hidden mb-6">
                                    <figure className="relative aspect-[1.3/1] overflow-hidden rounded-[20px] shadow-sm">
                                        <Image
                                            src={diagnosis_card.image}
                                            alt={diagnosis_card.heading}
                                            fill
                                            sizes="(max-width: 767px) 100vw, 50vw"
                                            className="object-cover"
                                        />
                                    </figure>
                                </div>

                                {/* Bullets */}
                                <ul className="space-y-2  md:space-y-4 mb-6">
                                    {diagnosis_card.clinic?.[0]?.points?.map((pointItem: any, idx: number) => (
                                        <li key={idx} className="text-[16px] md:text-[18px] text-[#334D72] font-medium flex items-start gap-3 leading-relaxed">
                                            <span className="mt-[0.2em] shrink-0">
                                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <circle cx="10" cy="10" r="10" fill="#42D0DC" />
                                                    <path d="M6 10L9 13L14 7" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                                                </svg>
                                            </span>
                                            <span>{pointItem.symptoms_card_clinic_details_rep_pointss}</span>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </article>
                    )}

                </div>
            </div>
        </section>
    );
}