import NavigationLink from "@/Components/NavigationLink"
import React from "react"
import Button from "../Button"
import VideoModal from "../VideoModal"

export default function CaseStudy1({ data }) {
    const { section_title, section_subtitle, casestudy_list, section_btn_text, section_btn_url } = data

    return (
        <>
            <div className="container">
                {(section_subtitle || section_title) && (
                    <>
                        <div className="cs_section_heading cs_style_1">
                            {section_subtitle && (
                                <p
                                    className="cs_section_subtitle cs_fs_18 cs_medium"
                                    dangerouslySetInnerHTML={{
                                        __html: section_subtitle
                                    }}
                                />
                            )}
                            {section_title && (
                                <h2
                                    className="cs_section_title cs_fs_53 cs_normal mb-0"
                                    dangerouslySetInnerHTML={{
                                        __html: section_title
                                    }}
                                />
                            )}
                        </div>
                        <div className="cs_height_85 cs_height_lg_50" />
                    </>
                )}

                <div className="cs_grid_style_1">
                    {casestudy_list?.map((item, index) => (
                        <div className={`cs_grid_item${[1, 2, 5, 6, 9, 10, 13, 14].includes(index) ? " cs_double" : ""}`} key={index}>
                            {item.link_type === "normal_link" && (
                                <div className="cs_case_study cs_style_1">
                                    <NavigationLink
                                        href={item?.casestudy_btn_url}
                                        className="cs_case_study_thumb cs_bg_filed"
                                        style={{
                                            backgroundImage: `url(${item?.casestudy_image_url})`
                                        }}
                                    />
                                    <div className="cs_case_study_info cs_white_color">
                                        <div className="cs_case_study_info_in">
                                            <h2 className="cs_case_study_title cs_fs_30 cs_normal cs_white_color">
                                                <NavigationLink href={item?.casestudy_btn_url}>{item?.casestudy_title}</NavigationLink>
                                            </h2>
                                            <Button
                                                href={item?.casestudy_btn_url}
                                                btnText={item?.casestudy_btn_text}
                                                btnClass="cs_btn cs_style_1 cs_type_1"
                                            />
                                        </div>
                                    </div>
                                </div>
                            )}
                            {item.link_type === "youtube_link" && (
                                <VideoModal videoSrc={item.youtube_video_url} imageUrl={item.casestudy_image_url} />
                            )}
                        </div>
                    ))}
                </div>
                {(section_btn_url || section_btn_text) && (
                    <div className="text-center">
                        <div className="cs_height_100 cs_height_lg_50"></div>
                        <Button
                            href={section_btn_url}
                            btnText={section_btn_text}
                            btnClass="cs_btn cs_style_1 cs_type_2 cs_primary_bg cs_white_color cs_w_100_sm"
                        />
                    </div>
                )}
            </div>
        </>
    )
}