import Link from "next/link";
import React from "react";

interface PropertyCategoryMobileCardProps {
  image: string;
  title: string;
  extraClass?: string;
}

const PropertyCategoryMobileCard: React.FC<PropertyCategoryMobileCardProps> = ({
  image,
  title,
  extraClass = "",
}) => {
  return (
    <Link
      href="/properties"
      aria-label={`View ${title} properties`}
      className={`card-item ${extraClass}`}
    >
      <div
        className="relative w-full rounded-sm overflow-hidden"
        style={{ aspectRatio: "3/4" }}
      >
        <img
          src={image}
          alt={title}
          className="absolute inset-0 w-full h-full object-cover"
          draggable={false}
        />

        {/* slight overlay: transparent from top to middle, darker at bottom for contrast */}
        <div
          className="absolute inset-0"
          aria-hidden
          style={{
            background:
              "linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.9) 100%)",
          }}
        />

        {/* Title positioned 60% from top of the image */}
        <div className="absolute left-1/2 top-[80%] -translate-x-1/2 -translate-y-1/2 z-10 w-full px-2 text-center">
          <h1 className="text-white leading-0 tracking-widest font-normal text-sm sm:text-lg uppercase">
            {title}
          </h1>
        </div>
      </div>
    </Link>
  );
};

export default PropertyCategoryMobileCard;