'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'
import Slider from 'react-slick'

const HeaderTopbar = () => {
  const { t, i18n } = useTranslation('common')
  const router = useRouter()

  const handleLanguageChange = (locale) => {
    changeLanguage(router, locale)
  }

  // Slider Settings
  const settings = {
    dots: false,
    arrows: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 2000,
    speed: 600,
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
  }

  return (
    <>
      <div
        className="header-top py-2"
        style={{
          background: 'linear-gradient(90deg, #C12026 11.32%, #E14448 95.28%)',
        }}
      >
        <div className="container-fluid">
          <Slider {...settings}>
            {/* 🔹 Show only Spanish switch if current lang is English */}
            {i18n.language === 'en' && (
              <div>
                <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
                  <div className="text-center text-white">
                    Haz clic en el botón para cambiar el idioma a <b>Español</b>.
                  </div>
                  <button
                    onClick={() => handleLanguageChange('es')}
                    className="white-button"
                  >
                    Cambiar a Español
                  </button>
                </div>
              </div>
            )}
            {
              i18n.language === 'es' && (
                <div>
                  <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
                    <div className="text-center text-white">
                      Haz clic en el botón para cambiar el idioma a <b>Inglés</b>.
                    </div>
                    <button
                      onClick={() => handleLanguageChange('en')}
                      className="white-button"
                    >
                      Cambiar a Inglés
                    </button>
                  </div>
                </div>
              )
            }

            {/* 🔹 Show only English switch if current lang is Spanish */}
            {i18n.language === 'en' && (
              <div>
                <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
                  <div className="text-center text-white">
                    Click the button to switch the language to <b>Spanish</b>.
                  </div>
                  <button
                    onClick={() => handleLanguageChange('es')}
                    className="white-button"
                  >
                    Switch to Spanish
                  </button>
                </div>
              </div>
            )}
            {i18n.language === 'es' && (
              <div>
                <div className="d-flex justify-content-center align-items-center gap-1 gap-md-5 flex-wrap">
                  <div className="text-center text-white">
                    Click the button to switch the language to <b>English</b>.
                  </div>
                  <button
                    onClick={() => handleLanguageChange('en')}
                    className="white-button"
                  >
                    Switch to English
                  </button>
                </div>
              </div>
            )}
          </Slider>
        </div>
      </div>

      {/* 🔹 Main Topbar */}
      <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="tel: +1 (305) 330-7413">
                  {t('contactUs')}
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default HeaderTopbar