// frontend/components/dashboard/GoalsCard.tsx
import { Icon } from "@/components/Icon";
import type { DashGoal } from "@/lib/types";

export function GoalsCard({ goals }: { goals: DashGoal[] }) {
  return (
    <section className="card">
      <div className="ch">
        <div className="ico">
          <Icon name="target" />
        </div>
        <div className="htext">
          <h3>목표</h3>
        </div>
      </div>
      <div className="goals">
        {goals.map((g) => (
          <div key={g.id}>
            <div className="goal-top">
              <span className="goal-title">{g.title}</span>
              <span className="goal-pct mono">{g.pct}%</span>
            </div>
            <div
              className="goal-bar"
              role="progressbar"
              aria-valuenow={g.pct}
              aria-valuemin={0}
              aria-valuemax={100}
              aria-label={g.title}
            >
              <i style={{ width: `${g.pct}%`, background: `var(--${g.tone})` }} />
            </div>
            <div className="goal-sub">{g.sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}