import Image from "next/image";
import Link from "next/link";
import FlagshipArrow from '../../../../public/images/flagship-arrow.svg';
import { FlagsbipServicesProps } from "@/types/about-us";

export default function AboutFlagshipServices({ title, description, service_cards }: FlagsbipServicesProps) {
    return (
        <section className="bg-[#F2F4F6] py-16 md:py-30 mb-16 md:mb-30">
            <div className="container ">
                <h2 className="text-[20px] md:text-[48px] font-medium mb-3 md:mb-5 md:text-center">{title}</h2>
                <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal md:text-center max-w-[846px] mb-6 md:mb-16 mx-auto">{description}</p>
                <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-10">
                    {
                        service_cards?.map((cardItem, index) => (
                            <div key={index} className="md:col-span-4">
                                <div className=" bg-white rounded-[16px] transition-all duration-300  hover:shadow-[0_12px_48px_0_rgba(0,0,0,0.08)]">
                                    <Image className="rounded-tl-[16px] rounded-tr-[16px]" src={cardItem.image} width={400} height={305} alt="flagship" />
                                    <div className="flex justify-between items-center p-6 bg-white rounded-bl-[16px] rounded-br-[16px]">
                                        <h6 className="text-[16px] text-[#00204F] font-bold">{cardItem.title}</h6>
                                        <Link href={cardItem.cta_link || cardItem.cta || "#"}>
                                            <Image className="rounded-tl-[16px] rounded-tr-[16px]" src={FlagshipArrow} width={36} height={36} alt="flagship" />
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        ))}
                </div>
            </div>
        </section>
    )
}