import React, { forwardRef } from "react";
import Image from "next/image";

export interface Recent_CardProps {
  image: string;
  title: string;
  tag: string;
  description: string;
  // Add additional props for event handlers
  onClick?: React.MouseEventHandler<HTMLDivElement>;
  onTouchStart?: React.TouchEventHandler<HTMLDivElement>;
  onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
  onTouchMove?: React.TouchEventHandler<HTMLDivElement>;
}

const Recent_Card = forwardRef<HTMLDivElement, Recent_CardProps>(({
  image,
  title,
  tag,
  description,
  onClick,
  onTouchStart,
  onTouchEnd,
  onTouchMove,
  ...props
}, ref) => {
  return (
    <div
      ref={ref}
      className="w-full h-full flex flex-col bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow cursor-pointer"
      onClick={onClick}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
      onTouchMove={onTouchMove}
      {...props}
    >
      {/* Image container with consistent aspect ratio */}
      <div className="relative w-full pt-[75%]">
        <Image
          src={image}
          alt={title}
          fill
          className="object-cover"
          sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 20vw"
        />
        <div className="absolute top-2 left-2">
          <span className="bg-black text-white text-xs px-2 py-1 rounded">
            {tag}
          </span>
        </div>
      </div>

      {/* Content section */}
      <div className="p-3 flex flex-col flex-grow">
        <h4 className="font-medium text-sm mb-1 line-clamp-1">{title}</h4>
        <p className="text-xs text-gray-500">{description}</p>
      </div>
    </div>
  );
});

Recent_Card.displayName = "Recent_Card";

export default Recent_Card;