"use client";
import { useState } from "react";
import { FaLocationDot } from "react-icons/fa6";

export default function LocationPermissionPopup({
  onAllow,
  onDeny,
  loading
}: {
  onAllow: () => void;
  onDeny: () => void;
  loading: boolean
}) {
  return (
    <div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50">
      <div className="bg-white rounded-xl overflow-hidden flex shadow-lg max-w-4xl w-[90%] h-[400px]">
        {/* Left Section */}
        <div className="w-1/2 bg-white flex flex-col justify-center items-center p-6 space-y-4">
          <FaLocationDot className="text-[#EF2424]" size={40} />
          <h2 className="text-lg font-semibold text-center">
            HappyHomes wants to <br /> Know your Location
          </h2>
          <div className="flex gap-4 mt-6">
            <button
              onClick={onDeny}
              className="bg-red-600 text-white px-6 py-2 rounded-full hover:bg-red-700"
            >
              Deny
            </button>
            <button
              onClick={onAllow}
              className="bg-blue-200 text-blue-700 px-6 py-2 rounded-full hover:bg-blue-300"
            >
              {loading ? 'Requesting...' : 'Allow' }
            </button>
          </div>
        </div>

        {/* Right Section (Map Preview) */}
        <div className="w-1/2">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d15852.813850143353!2d3.345!3d6.553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sng!4v1700000000000"
            width="100%"
            height="100%"
            allowFullScreen
            loading="lazy"
            className="w-full h-full"
          />
        </div>
      </div>
    </div>
  );
}
