import { useI18n } from "../../shared/I18nProvider.jsx";
import { settingsModel } from "./pro-view-model.js";

export function ProSettingsSection({ entitlement, accountCount, onRestore, onManage, busy }) {
  const { language } = useI18n();
  const model = settingsModel({ entitlement, accountCount, language });
  return <section className="pro-settings"><h3>Pro</h3><p><strong>{model.label}</strong> · {model.count}</p>
    {model.warning && <p role="status">{model.warning}</p>}{model.expiresAt && <p>{model.expiresLabel}: {model.expiresAt}</p>}
    <div><button disabled={busy} onClick={onRestore}>{model.restoreLabel}</button><button onClick={onManage}>{model.manageLabel}</button></div>
  </section>;
}
