import { Link } from "@inertiajs/react";
import ComImageStatusTag from "./ComImageStatusTag";
import { forwardRef } from 'react';

// Convert to forwardRef to allow the IntersectionObserver to work
export const ComImageCard = forwardRef(({ image, path, showUserName = false}, ref) => {
  return (
    <Link
      href={`${path}/${image.id}`}
      ref={ref}
      className="bg-white overflow-hidden shadow rounded-lg flex flex-col"
    >
      <div className="relative pb-[75%]">
        <img
          loading="lazy"
          src={image.thumbnail_url || image.file_url}
          alt={image.title}
          className="absolute h-full w-full object-cover"
        />
        <div className="absolute top-2 right-2">
          <ComImageStatusTag image={image} />
        </div>
      </div>
      <div className="px-4 py-4 flex flex-col justify-between flex-grow">
        {showUserName && (
          <div className="text-sm text-gray-500">
            {image.user.name}
          </div>
        )}
        <h3 className="text-lg font-medium text-gray-900 truncate">
          {image.title}
        </h3>
        <div className="mt-2 flex flex-wrap gap-1">
          {image.tags.map((tag) => (
            <span
              key={`tag-${tag.id}`}
              className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"
            >
              {tag.name}
            </span>
          ))}
        </div>
        <div className="mt-4 flex justify-between">
          <Link
            href={`${path}/${image.id}`}
            className="text-sm text-indigo-600 hover:text-indigo-900"
          >
            查看详情
          </Link>
          <span className="text-sm text-gray-500">
            {new Date(image.created_at).toLocaleDateString()}
          </span>
        </div>
      </div>
    </Link>
  );
});