// Rôle : encapsule l'input fichier JSON derrière un bouton d'import réutilisable.
import { Icon } from "./Icon.jsx";
import { Tooltip } from "./Tooltip.jsx";

export function ImportButton({ className, label, title, ariaLabel, icon, onFile, tooltip = "", tooltipPosition = "top", ...props }) {
  const children = <>
      {icon && <Icon name={icon} />}
      {label}
      <input type="file" accept="application/json" hidden onChange={async (event) => {
        const file = event.target.files?.[0];
        if (file) await onFile(file);
        event.target.value = "";
      }} />
  </>;

  if (tooltip) {
    return <Tooltip as="label" className={className} content={tooltip} position={tooltipPosition} aria-label={ariaLabel} {...props}>{children}</Tooltip>;
  }
  return <label className={className} aria-label={ariaLabel} title={title} {...props}>{children}</label>;
}