"use client"
import Image from 'next/image';
import React from 'react'
import { useTranslation } from 'react-i18next';
 const ContactData = [
    {
        icon: '/icons/contactpageIcons/Vector (11).png',
    },
    {
        icon: '/icons/contactpageIcons/Vector (12).png',
    },
    {
        icon: '/icons/contactpageIcons/Vector (13).png',
    },
    {
        icon: '/icons/contactpageIcons/Vector (14).png',
    },
    {
        icon: '/icons/contactpageIcons/Vector (15).png',
    },
  
  ];
const ShareBlog = () => {
  const { t }=useTranslation("blogDetail")
  return (
   <div className=" pb-10 lg:pb-[61px] mt-6 lg:mt-8">
         {/* Social Media Channels */}
         <div className=" pb-5 lg:pb-[33px] px-5 md:px-[50px] lg:px-[96px]">
         
           <h1 className=" text-[30px] md:text-[35px] lg:text-[40px] font-semibold   mb-1 text-center ">
             {t("Share this")} <span className="text-primary">{t("Blog")}</span>
           </h1>
           <p className=" text-center">
            {t("Share this blog to help others find their dream home or make smarter property decisions.")}
           </p>
         </div>
         <div className="flex w-full h-auto bg-primary py-5 lg:py-7 px-5">
           <div className="flex flex-wrap justify-center items-center gap-4 md:gap-6  mx-auto">
             {ContactData.map((data, idx) => (
               <div
                 key={idx}
                 className=" w-[50px] h-[50px] md:w-[70px] md:h-[70px] lg:w-[100px] lg:h-[100px] rounded-full border-2 border-white bg-primary flex justify-center items-center"
               >
                 <Image src={data.icon} width={26} height={24} alt='bagicon' />
               </div>
             ))}
           </div>
         </div>
       </div>
  )
}

export default ShareBlog