"use client";

import React from "react";
import Link from "next/link";
import Pagination from "../properties/contents/pagination";

interface PropertyCardProps {
  image: string;
  hoverImage?: string;
  title: string;
  category: string;
  address: string;
  size: number;
  status: string;
}

// Dummy property data
const searchResults: PropertyCardProps[] = [
  {
    image: "/images/properties/buildings_card_images/building-1.jpg",
    hoverImage: "/images/buildings/featured-2-night.jpg",
    title: "Navana Khodeza Pinewood",
    category: "residential",
    address: "Plot-008, Road-505G, Sector-16, Jolshiri",
    size: 4000,
    status: "Ongoing",
  },
  {
    image: "/images/properties/buildings_card_images/building-2.jpg",
    hoverImage: "/images/buildings/featured-2-night.jpg",
    title: "ELVION BY NAVANA",
    category: "residential",
    address: "Plot-008, Road-505G, Sector-16, Jolshiri",
    size: 4000,
    status: "Ongoing",
  },
  {
    image: "/images/properties/buildings_card_images/building-3.jpg",
    hoverImage: "/images/buildings/featured-2-night.jpg",
    title: "Navana Fateha Windermere",
    category: "residential",
    address: "Plot-008, Road-505G, Sector-16, Jolshiri",
    size: 4000,
    status: "Ongoing",
  },
  {
    image: "/images/properties/buildings_card_images/building-4.jpg",
    hoverImage: "/images/buildings/featured-2-night.jpg",
    title: "Navana Pristine Heights",
    category: "residential",
    address: "Plot-008, Road-505G, Sector-16, Jolshiri",
    size: 4000,
    status: "Ongoing",
  },
  {
    image: "/images/properties/buildings_card_images/building-1.jpg",
    hoverImage: "/images/buildings/featured-2-night.jpg",
    title: "Navana Greenview Tower",
    category: "residential",
    address: "Plot-008, Road-505G, Sector-16, Jolshiri",
    size: 4000,
    status: "Ongoing",
  },
  {
    image: "/images/properties/buildings_card_images/building-2.jpg",
    hoverImage: "/images/buildings/featured-2-night.jpg",
    title: "Navana Skyline Residence",
    category: "residential",
    address: "Plot-008, Road-505G, Sector-16, Jolshiri",
    size: 4000,
    status: "Ongoing",
  },
];

const PropertyCard = ({
  image,
  hoverImage,
  title,
  category,
  address,
  size,
  status,
}: PropertyCardProps) => {
  return (
    <div className="group">
      <Link href="/property-details">
        <div className="relative w-full aspect-[3/4] overflow-hidden cursor-pointer">
          {/* Day image (base image) */}
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={image}
            alt={title}
            className="w-full h-full object-cover transition-opacity duration-[1500ms] ease-in-out group-hover:opacity-0"
          />
          {/* Night image (hover image) */}
          {hoverImage && (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={hoverImage}
              alt={`${title} - Night view`}
              className="absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-[1500ms] ease-in-out group-hover:opacity-100"
            />
          )}
          <div className="bg-black/25 absolute w-full h-full top-0 left-0"></div>
          <h3 className="font-creato text-white text-[14px] lg:text-[18px] font-light tracking-[0.38em] leading-[110%] uppercase absolute top-24 lg:top-32 -right-10 lg:-right-14 rotate-270 group-hover:scale-[1.1] transition-all duration-1000">
            {category}
          </h3>
        </div>
      </Link>
      <div className="pt-5 md:pt-8">
        <Link href="/property-details">
          <h3 className="text-[#333333] font-creato font-medium text-[14px] md:text-[18px] xl:text-[22px] leading-2 tracking-widest mb-4 lg:mb-5 hover:text-[#DD577F] transition-colors duration-300">
            {title}
          </h3>
        </Link>
        {/* icon + information block */}
        <div>
          <div className="inline-flex items-start mb-2 lg:mb-3">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/icons/map_pin.svg"
              alt="map pin"
              className="mr-2 invert opacity-20 w-[16px] h-[16px] lg:w-[18px] lg:h-[18px] mt-0.5"
            />
            <p className="text-[#888888] font-creato font-normal leading-relaxed tracking-widest text-[12px] lg:text-[14px]">
              {address}
            </p>
          </div>
        </div>

        <div>
          <div className="inline-flex items-center mb-2 lg:mb-3">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/icons/stairs.svg"
              alt="unit size"
              className="mr-2 invert opacity-50 w-[12px] h-[12px] lg:w-[14px] lg:h-[14px]"
            />
            <p className="text-[#888888] font-creato font-normal text-[12px] lg:text-[14px] leading-1 tracking-widest">
              Unit Size: {size.toLocaleString()} sqft (maximum)
            </p>
          </div>
        </div>

        <div>
          <div className="inline-flex items-center">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/icons/status.svg"
              alt="status"
              className="mr-2 invert opacity-70 w-[12px] h-[12px] lg:w-[14px] lg:h-[14px]"
            />
            <p className="text-[#888888] font-creato font-normal text-[12px] lg:text-[14px] leading-1 tracking-widest">
              Present Status: {status}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

const SearchContentGrid = () => {
  return (
    <section className="bg-white py-10 lg:py-24">
      <div className="container mx-auto px-4 lg:px-8">
        {/* Property Grid - 3 columns on desktop, 2 on tablet, 1 on mobile */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12 xl:gap-16">
          {searchResults.map((property, index) => (
            <PropertyCard
              key={index}
              image={property.image}
              hoverImage={property.hoverImage}
              title={property.title}
              category={property.category}
              address={property.address}
              size={property.size}
              status={property.status}
            />
          ))}
        </div>
        {/* Pagination */}
        <div className="flex justify-center pt-12 xl:pt-20 pb-10">
          <Pagination />
        </div>
      </div>
    </section>
  );
};

export default SearchContentGrid;