Goal Tracker Card

import { GoalTrackerCard } from '@/components/ui/goal-tracker-card'; // Adjust the import path

export default function GoalTrackerCardDemo() {
  return (
    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-8 bg-background p-4">
      <GoalTrackerCard
        title="Vacation 2025"
        imageUrl="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8UGFyaXN8ZW58MHx8MHx8fDA%3D?q=80&w=400"
        currentAmount={2184}
        goalAmount={2500}
      />
      <GoalTrackerCard
        title="Buy a house"
        imageUrl="https://images.unsplash.com/photo-1583608205776-bfd35f0d9f83?q=80&w=400"
        currentAmount={182495}
        goalAmount={250000}
        totalSegments={35} // Example of customizing segment count
      />
    </div>
  );
}