import { useAvatarUpload } from "~/hooks/use-avatar-upload";
import { buttonClass } from "~/ui/Button";
import { FieldError } from "~/ui/Field";

const ACCEPTED = "image/png,image/jpeg,image/gif,image/webp";

/** Compact picture uploader for profile pages; the full panel lives in account settings. */
export function AvatarUploadButton({ account }: { account: string }) {
  const avatar = useAvatarUpload(account);
  return (
    <div className="space-y-1">
      <label className={buttonClass("secondary", "sm", avatar.pending ? "cursor-wait opacity-60" : "cursor-pointer")}>
        {avatar.pending ? "Uploading…" : "Change picture"}
        <input
          type="file"
          accept={ACCEPTED}
          className="sr-only"
          disabled={avatar.pending}
          onChange={(event) => {
            const file = event.currentTarget.files?.[0];
            if (file) avatar.upload(file);
            event.currentTarget.value = "";
          }}
        />
      </label>
      {avatar.error && <FieldError>{avatar.error}</FieldError>}
    </div>
  );
}