"use client";

import { useState } from "react";

export default function AutoSubmitFileInput({ name, accept }: { name: string; accept: string }) {
  const [busy, setBusy] = useState(false);

  return (
    <label className={`cursor-pointer text-xs font-medium ${busy ? "text-stone-400" : "text-rose-700 hover:underline"}`}>
      {busy ? "Uploading…" : "Change"}
      <input
        type="file"
        name={name}
        accept={accept}
        className="hidden"
        disabled={busy}
        onChange={(e) => {
          if (e.target.files?.[0]) {
            setBusy(true);
            e.currentTarget.form?.requestSubmit();
          }
        }}
      />
    </label>
  );
}