Goal — Progress

"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";

const STATS = [
  { label: "Projected finish", value: "Oct 2024" },
  { label: "Monthly average", value: "$1,250" },
  { label: "Top contributor", value: "Auto-transfer" },
];

export function GoalProgressBlock() {
  return (
    <section className="p-6">
      <Card className="mx-auto max-w-md">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center justify-between text-base">
            Savings goal
            <Badge variant="secondary">On track</Badge>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-5">
          <div>
            <div className="mb-2 flex items-baseline justify-between">
              <span className="text-3xl font-bold tracking-tight tabular-nums">
                $24,000
              </span>
              <span className="text-sm text-muted-foreground">of $30,000</span>
            </div>
            <Progress value={80} />
            <p className="mt-2 text-xs text-muted-foreground">80% complete</p>
          </div>

          <Separator />

          <dl className="space-y-2.5">
            {STATS.map((s) => (
              <div key={s.label} className="flex items-center justify-between text-sm">
                <dt className="text-muted-foreground">{s.label}</dt>
                <dd className="font-medium">{s.value}</dd>
              </div>
            ))}
          </dl>
        </CardContent>
      </Card>
    </section>
  );
}