import type { Attachment } from "../../types/post";
import { filenameWithExtension } from "./utils/filenameDisplay";

/**
 * Bottom-left overlay that surfaces an attachment's filename on top of an
 * image/video card. Used for posts in the 官方物料 (`official-assets`)
 * category, where editors rely on the filename to identify the original asset
 * at a glance.
 */
export function AttachmentFilenameLabel({
  attachment,
  className = "absolute bottom-2 left-2",
}: {
  attachment: Attachment;
  className?: string;
}) {
  const display = filenameWithExtension(attachment.filename, attachment.mime);
  if (!display) return null;
  return (
    <div
      className={`pointer-events-none z-10 max-w-[calc(100%-1rem)] truncate rounded-full bg-black/80 px-2.5 py-1 text-[12px] font-medium text-white shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-md ${className}`}
      title={display}
    >
      {display}
    </div>
  );
}
