'use client';
import React, { useRef, useState } from 'react';
import { useTranslation } from 'next-i18next';
interface AvailabilityIframeProps {
  url: string;
}

const AvailabilityIframe: React.FC<AvailabilityIframeProps> = ({ url = '' }) => {
  const [isActive, setIsActive] = useState(false);
  const sectionRef = useRef<HTMLElement>(null);
  const { t } = useTranslation('projects');
  const handleToggle = () => {
    const next = !isActive;
    setIsActive(next);

    if (next && sectionRef.current) {
      // Esperamos al próximo frame para asegurar que el iframe es interactivo antes de hacer scroll
      requestAnimationFrame(() => {
        sectionRef.current?.scrollIntoView({
          behavior: 'smooth',
          block: 'center',
        });
      });
    }
  };

  return (
    <section
      ref={sectionRef}
      className="wrapper tw-relative tw-h-[636px] tw-max-h-[calc(100vh-100px)]"
      id="availability"
    >
      <iframe
        src={url}
        width="100%"
        height={636}
        className={`tw-w-full tw-h-full tw-border-none ${isActive ? 'tw-pointer-events-auto' : 'tw-pointer-events-none'
          }`}
        allowFullScreen
        loading="lazy"
      />

      <button
        type="button"
        onClick={handleToggle}
        className={`tw-w-max tw-absolute tw-z-10 tw-bg-black/[0.75] tw-text-white tw-border tw-border-white tw-uppercase tw-font-bold tw-font-inter tw-text-xs tw-py-2 tw-px-4 md:tw-px-8 md:tw-py-4 tw-rounded-md 
    tw-transition-all tw-duration-700 tw-ease-in-out 
    ${isActive
            ? 'tw-top-4 tw-right-4 tw-translate-x-0 tw-translate-y-0 tw-left-auto'
            : 'tw-top-1/2 tw-left-1/2 -tw-translate-x-1/2 -tw-translate-y-1/2'
          }`}
      >
        {isActive ? t("projects:projectIn.outMap") : t("projects:projectIn.exploreMap")}
      </button>


    </section>
  );
};

export default AvailabilityIframe;