import React from 'react'
import { ServicesArray } from '../../data/Service';

const Service = () => {
    const {t} = useTranslation();

  return (
    <div className='Service'>
        <h1>{t("OUR SERVICES")}</h1>
        <h2>{t("What services do we provide?")}</h2>
         <picture>
          <source className="service_image" srcSet="/Service/ServicesRes.png" media="(max-width: 600px)" />
          <img className="service_image" src="/Service/Services.png" alt="MDN" />
        </picture>
        {/* <ServiceImage/> */}
        {/* <picture>
          <source className="service_image" srcSet="/Service/serviceRes.svg" media="(max-width: 600px)" />
          <img className="service_image" src="/Service/service.svg" alt="MDN" />
          <div className='single_services_container'>
          {
            ServicesArray.map((e) =>(
              <div className='single_service'>
                <h1>{t(e.title)}</h1>
                <p>{t(e.text)}</p>
              </div>
            ))
          }
          </div>
        </picture> */}
        {/* <img src="/Service/service.svg" alt="" /> */}
    </div>
  )
}

export default Service