import { euroFormatter } from "@/lib/finance/money";
import type { UserSettings } from "@/types/finance";

export function GoalProgress({
  settings,
  yearlyIncome,
  yearlySavings,
}: {
  settings?: UserSettings;
  yearlyIncome: number;
  yearlySavings: number;
}) {
  const goals = [
    {
      label: "Obiettivo entrate",
      current: yearlyIncome,
      goal: settings?.monthlyIncomeGoal
        ? settings.monthlyIncomeGoal * 12
        : undefined,
    },
    {
      label: "Obiettivo risparmio",
      current: yearlySavings,
      goal: settings?.monthlySavingsGoal
        ? settings.monthlySavingsGoal * 12
        : undefined,
    },
  ].filter((item) => item.goal);

  if (!goals.length) return null;

  return (
    <section className="grid gap-3 md:grid-cols-2">
      {goals.map((item) => {
        const percentage = Math.min(
          100,
          (item.current / Number(item.goal)) * 100,
        );
        return (
          <div
            className="rounded-lg border border-white/10 bg-white/[0.03] p-4"
            key={item.label}
          >
            <div className="flex items-center justify-between gap-3 text-sm">
              <span className="text-slate-300">{item.label}</span>
              <span className="text-slate-400">
                {euroFormatter.format(item.current)} /{" "}
                {euroFormatter.format(Number(item.goal))}
              </span>
            </div>
            <div className="mt-3 h-2 overflow-hidden rounded-full bg-slate-950">
              <div
                className="h-full rounded-full bg-emerald-400 transition-[width]"
                style={{ width: `${percentage}%` }}
              />
            </div>
          </div>
        );
      })}
    </section>
  );
}