'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'

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


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

          {/* Contact Info */}
          <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>

          {/* Contact Button */}
          <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="/contact">
                {t('contactUs')}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default HeaderTopbar