import Link from 'next/link';
import { FC } from 'react';

// =========================================================
type TopbarProps = { bgColor?: string; textColor?: string; translatedPath: string; locale: string; trans: any };
// =========================================================

const Topbar: FC<TopbarProps> = ({
  bgColor = 'tw-bg-tertiary-dark',
  textColor = 'tw-text-white',
  translatedPath = '#',
  locale = 'es',
  trans
}) => {
  return (
    <div className={`${bgColor} ${textColor} tw-font-normal tw-text-sm d-none d-lg-block tw-font-ibm tw-relative`}>
      <div className="container d-md-flex flex-md-row tw-py-1">
        <div className="d-flex py-1 flex-row align-items-center tw-gap-3">
          <span className="tw-text-secondary-light"> | </span>
          <Link
            href={translatedPath}
            locale={locale}
            className="tw-text-white hover:tw-text-secondary-light tw-uppercase "
          >
            {trans('common:topHeader.lang')}
          </Link>

          <span className="tw-text-secondary-light"> | </span>
          
          {/* CAMBIO CRÍTICO: Usamos una etiqueta <a> nativa para abrir el enlace externo */}
          <a 
            href="https://horizonte.grupovelas.com/" 
            target="_blank" 
            rel="noopener noreferrer" 
            className="tw-text-white hover:tw-text-secondary-light tw-uppercase"
          >
            {trans('common:topHeader.blog')}
          </a>

          {/*<span className="tw-text-secondary-light"> | </span>
          <Link
            href={trans('routes:/human-capital')}
            className="tw-text-white hover:tw-text-secondary-light tw-uppercase"
          >
            {trans('common:header.human-capital')}
          </Link> */}
        </div>
        {/* <div className="tw-absolute tw-right-0 tw-top-0 tw-bottom-0 d-flex flex-row align-items-center tw-gap-1">
          <div className="d-flex py-1 px-4 flex-row align-items-center tw-bg-[#414141]">
            <Link
              href={trans('routes:/agents')}
              className="tw-uppercase tw-font-ibm tw-text-main-light hover:tw-text-secondary-light tw-text-base tw-font-normal"
            >
              {trans('common:footer:agents')}
            </Link>
          </div>
        </div> */}
      </div>
    </div>
  );
};

export default Topbar;