import { forwardRef } from "react";
 
/**
 * Attachment
 *
 * name:       string - filename, e.g. "report.pdf"
 * type:       string - MIME type, e.g. "image/png"; image types render a thumbnail
 * src:        string - thumbnail URL for image types
 * alt:        string - alt text for the thumbnail (default: "File thumbnail preview")
 * icon:       ReactNode - overrides the default file icon; add aria-hidden="true" if decorative
 * onClose:    function - renders a close/remove button
 * closeLabel: string - aria-label for the close button (default: "Remove file")
 * disabled:   boolean - hides the close button and applies disabled styles
 */
const Attachment = forwardRef(function Attachment(
  {
    name,
    type,
    src,
    alt = "File thumbnail preview",
    icon,
    onClose,
    closeLabel = "Remove file",
    disabled = false,
    className = "",
    ...props
  },
  ref
) {
  const isImage = type?.startsWith("image/");
  const showThumbnail = isImage && src;
 
  return (
    <div
      ref={ref}
      className={["prs-attachment", className].filter(Boolean).join(" ")}
      {...props}
    >
      {/* Thumb */}
      <div className="prs-thumb">
        {showThumbnail ? (
          <img src={src} alt={alt} />
        ) : (
          icon ?? <FileIcon />
        )}
      </div>
 
      {/* Meta */}
      <div className="prs-meta">
        <div className="prs-name">{name}</div>
        <small className="prs-ext">{type}</small>
      </div>
 
      {/* Close */}
      {onClose && !disabled && (
        <button
          type="button"
          className="prs-close"
          aria-label={closeLabel}
          onClick={onClose}
        >
          <CloseIcon />
        </button>
      )}
    </div>
  );
});
 
export default Attachment;
 
// ---------------------------------------------------------------------------
// Internal icons
// ---------------------------------------------------------------------------

const CloseIcon = () => (
  <iconify-icon icon="mdi:close" aria-hidden="true" noobserver />
);

function FileIcon() {
  return (
    <iconify-icon icon="mdi:file-document-outline" aria-hidden="true" noobserver />
  );
}