import React from "react";

type ImageUploaderProps = {
  inputRef?: React.RefObject<HTMLInputElement | null>;
  accept?: string;
  onFileChange?: (file: File | null) => void;
  style?: React.CSSProperties;
  lang?: string;
};

const Uploader = ({
  inputRef,
  accept="*/*",
    onFileChange,
  style,
  lang = "ar",
}: ImageUploaderProps) => {
  const isArabic = (lang || "ar") === "ar";
  const uploadLabel = isArabic
    ? "ارفق صورة الحوالة"
    : "Attach transfer receipt";

  return React.createElement(
    "label",
    {
      style: {
        width: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: "10px",
        padding: "12px 14px",
        borderRadius: "12px",
        border: "1px solid #dbeafe",
        background: "#f8fbff",
        color: "#1e293b",
        cursor: "pointer",
        fontSize: "0.92rem",
        fontWeight: 600,
        userSelect: "none",
        ...style,
      },
    },
    React.createElement("input", {
      ref: inputRef,
      type: "file",
      accept,
      onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
        onFileChange?.(e.target.files?.[0] || null),
      style: { display: "none" },
    }),
    React.createElement(
      "svg",
      {
        width: "20",
        height: "20",
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round",
        "aria-hidden": "true",
      },
      React.createElement("path", {
        d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
      }),
      React.createElement("polyline", { points: "17 8 12 3 7 8" }),
      React.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" }),
    ),
    React.createElement("span", null, uploadLabel),
  );
};

export default Uploader;