import { motion } from "framer-motion";

import { useTranslation } from "react-i18next";
import PropertyMapWithMarkers from "../PropertyMapWithMarkers";
export default function MapSection({ mapSectionRef, isScrolling, resetSearch, filteredProperties }) {
  const { t } = useTranslation();
  return (
    <>
      <motion.section
        ref={mapSectionRef}
        initial={{ opacity: 0, y: 50 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -50 }}
        transition={{
          type: "spring",
          damping: 20,
          stiffness: 100,
          duration: 0.6,
        }}
        className="py-12 bg-gray-50 relative"
      >
        {isScrolling && <motion.div className="absolute top-0 left-0 right-0 h-1 bg-amber-500 z-10" initial={{ scaleX: 0 }} animate={{ scaleX: 1 }} transition={{ duration: 1, ease: "easeInOut" }} />}

        <div className="container mx-auto px-4">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} className="text-center mb-8">
            <div className="flex items-center justify-center gap-4 mb-2">
              <h2 className="text-3xl font-bold text-gray-900">{filteredProperties.length > 0 ? t("searchResults") : t("no-properties")}</h2>
              <motion.button
                onClick={resetSearch}
                className="px-4 py-2 bg-white border border-gray-300 rounded-full text-sm font-medium text-gray-700 hover:bg-gray-50 shadow-sm flex items-center gap-2"
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                {t("newSearch")}
              </motion.button>
            </div>

            {filteredProperties.length > 0 ? (
              <p className="text-gray-600">{t("foundPropertiesCount", { count: filteredProperties.length })}</p>
            ) : (
              <p className="text-gray-600">{t("noPropertiesMatchFilters")}</p>
            )}
          </motion.div>

          <motion.div
            className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200"
            initial={{ scale: 0.95, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            transition={{ delay: 0.3, type: "spring" }}
          >
            {filteredProperties.length > 0 ? (
              <PropertyMapWithMarkers
                properties={filteredProperties.map((p) => ({
                  ...p,
                  lat: p.location.lat,
                  lng: p.location.lng,
                  address: p.location.address,
                }))}
                onPropertyClick={() => {}}
              />
            ) : (
              <div className="h-[400px] flex flex-col items-center justify-center bg-gray-50">
                <div className="w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center mb-4">
                  <svg className="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <h3 className="text-xl font-bold text-gray-700 mb-2">{t("no-properties")}</h3>
                <p className="text-gray-500">{t("try-changing-search-criteria")}</p>
              </div>
            )}
          </motion.div>
        </div>
      </motion.section>
    </>
  );
}