import { Card } from "@/components/ui/Card";
import { ProgressBar } from "@/components/ui/ProgressBar";

export function GoalCard({ name, saved, target, date }: { name: string; saved: number; target: number; date: string }) {
  const pct = Math.round((saved / target) * 100);
  return (
    <Card className="p-4">
      <div className="flex items-start justify-between">
        <div>
          <h3 className="font-bold text-ink dark:text-paper">{name}</h3>
          <p className="text-sm text-ink/55 dark:text-paper/55">Projected {date}</p>
        </div>
        <p className="font-display text-2xl text-forest dark:text-mint">{pct}%</p>
      </div>
      <div className="mt-5">
        <ProgressBar value={pct} />
      </div>
      <p className="mt-3 text-sm text-ink/60 dark:text-paper/60">${saved.toLocaleString()} of ${target.toLocaleString()}</p>
    </Card>
  );
}