export function RpgCreationRoleAssetStudioFooter(props: {
  isSavingToRole: boolean;
  saveStatus: string | null;
  syncBusy: boolean;
  workingRoleGeneratedVisualAssetId?: string;
  workingRoleImageSrc?: string;
  onSaveToRole: () => void;
}) {
  const {
    isSavingToRole,
    saveStatus,
    syncBusy,
    workingRoleGeneratedVisualAssetId,
    workingRoleImageSrc,
    onSaveToRole,
  } = props;

  return (
    <div className="platform-role-studio__footer sticky bottom-0 z-10 -mx-4 px-4 pb-[calc(env(safe-area-inset-bottom,0px)+0.35rem)] pt-3 sm:mx-0 sm:rounded-3xl sm:border sm:border-[var(--platform-subpanel-border)] sm:px-4">
      <div className="space-y-3">
        {saveStatus ? (
          <div className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-zinc-300">
            {saveStatus}
          </div>
        ) : null}
        <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
          <button
            type="button"
            onClick={onSaveToRole}
            disabled={
              isSavingToRole ||
              syncBusy ||
              !workingRoleImageSrc ||
              !workingRoleGeneratedVisualAssetId
            }
            className={`rounded-full border border-emerald-400/30 bg-emerald-500/10 px-5 py-2 text-sm font-semibold text-emerald-100 transition-colors hover:bg-emerald-500/20 ${
              isSavingToRole ||
              syncBusy ||
              !workingRoleImageSrc ||
              !workingRoleGeneratedVisualAssetId
                ? 'cursor-not-allowed opacity-45'
                : ''
            }`}
          >
            {isSavingToRole || syncBusy ? '保存中...' : '保存到当前角色'}
          </button>
        </div>
      </div>
    </div>
  );
}

export default RpgCreationRoleAssetStudioFooter;