import { ICONS } from "@/lib/icons";

export function TargetProgressPanel({ pct, daysLeft }: { pct: number; daysLeft: number | null }) {
  return (
    <div className="card p-5">
      <div className="mb-2 flex items-center gap-2 font-bold text-slate-800">
        <ICONS.target size={18} strokeWidth={1.75} className="text-slate-400" /> Tiến độ dòng tiền dương 60 ngày
      </div>
      <div className="text-2xl font-extrabold text-teal-600">{pct}%</div>
      <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-slate-100">
        <div className="h-full rounded-full bg-teal-500" style={{ width: `${pct}%` }} />
      </div>
      <div className="mt-2 text-xs text-slate-400">
        {daysLeft !== null ? `Còn ${daysLeft} ngày để đạt mục tiêu` : "Chưa thiết lập mục tiêu"}
      </div>
    </div>
  );
}