import { SalaryHistoryPanel } from "@/components/admin/SalaryHistoryPanel";

// Rein lesende Selbstansicht fürs neue Mitarbeiter-Tab (/account/mitarbeiter,
// 25.09.2026) — Bearbeiten bleibt HR-only über die Admin-Personalakte
// (SalaryFieldsForm). Nutzt dieselbe Historie-Anzeige wie dort.
type SalaryHistoryEntry = {
  id: string;
  oldHourlyWage: number | null;
  newHourlyWage: number | null;
  reason: string;
  byName: string;
  at: string;
};

export function MySalaryPanel({
  hourlyWage,
  monthlyHours,
  salaryHistory,
}: {
  hourlyWage: number | null;
  monthlyHours: number | null;
  salaryHistory: SalaryHistoryEntry[];
}) {
  return (
    <div className="flex flex-col gap-4">
      <div className="border border-white/10 rounded-xl p-5 grid grid-cols-2 gap-4">
        <div>
          <p className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)] mb-1">Stundenlohn</p>
          <p className="text-sm">{hourlyWage != null ? `${hourlyWage.toLocaleString("de-DE")} €/Std.` : "—"}</p>
        </div>
        <div>
          <p className="text-xs uppercase tracking-[0.08em] text-[var(--rk-ink-muted)] mb-1">Monatliche Arbeitsstunden</p>
          <p className="text-sm">{monthlyHours != null ? `${monthlyHours.toLocaleString("de-DE")} Std./Monat` : "—"}</p>
        </div>
      </div>
      <SalaryHistoryPanel entries={salaryHistory} />
    </div>
  );
}