'use client'

import React from 'react'
import Link from 'next/link'
import Logo from '/public/images/logo.png'
import Image from 'next/image'
import { useTranslation } from 'next-i18next'
import { changeLanguage } from '../../utils/commonFunction.utils'
import { useRouter } from 'next/router'

const HeaderTopbar = () => {
  const { t } = useTranslation('common')

  const router = useRouter()

  const handleLanguageChange = () => {
    changeLanguage(router, 'es'); // always switch to Spanish
  };

  return (
    <>
      <div
        className="header-top py-2 "
        style={{
          background: 'linear-gradient(90deg, #C12026 11.32%, #E14448 95.28%)',
        }}
      >
        <div className="container-fluid">
          <div className='d-flex justify-content-center align-items-center gap-5 flex-wrap'>
            <div className="text-center" style={{ color: 'white' }}>
              Haz clic en el botón para cambiar a español.
            </div>
            <button onClick={handleLanguageChange} className='white-button'>Haz clic aquí</button>
          </div>
        </div>
      </div>

      <div className="topbar d-lg-block d-none">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-3 col-12 d-lg-block d-none">
              <Link className="navbar-brand" href="/">
                <Image src={Logo} alt="logo" />
              </Link>
            </div>

            <div className="col-lg-6 col-12">
              <div className="contact-info-wrap">
                <div className="contact-info">
                  <div className="icon">
                    <i className="fi flaticon-phone-call"></i>
                  </div>
                  <div className="info-text">
                    <span>{t('callUs')}</span>
                    <p>+1 (305) 330-7413</p>
                  </div>
                </div>
                <div className="contact-info">
                  <div className="icon">
                    <i className="fi flaticon-email"></i>
                  </div>
                  <div className="info-text">
                    <span>{t('emailNow')}</span>
                    <p>info@janahanlaw.com</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="col-lg-3 col-12 d-flex justify-content-end align-items-center">
              <div className="contact-info ms-3">
                <Link className="theme-btn" href="tel:+919847739275">
                  {t('contactUs')}
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default HeaderTopbar