"use client";

import { Button } from "@/components/ui/button";
import { PlusCircle, RefreshCw } from "lucide-react";
import Link from "next/link";
import { GoalsList } from "./components/goals-list";
import { useState } from "react";

export default function GoalsPage() {
  const [refreshing, setRefreshing] = useState(false);

  const handleRefresh = () => {
    setRefreshing(true);
    // Force reload the page
    window.location.href = `/goals?refresh=${new Date().getTime()}`;
  };

  return (
    <div className="container mx-auto px-4 py-6 md:py-8">
      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6 gap-4">
        <div>
          <h1 className="text-xl sm:text-2xl font-bold tracking-tight">Financial Goals</h1>
          <p className="text-sm text-muted-foreground">
            Track your progress towards your financial goals
          </p>
        </div>
        <div className="flex gap-2 sm:gap-3">
          <Button variant="outline" onClick={handleRefresh} disabled={refreshing} size="sm" className="text-xs sm:text-sm">
            <RefreshCw className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
            Refresh
          </Button>
          <Link href="/goals/new">
            <Button size="sm" className="text-xs sm:text-sm">
              <PlusCircle className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
              New Goal
            </Button>
          </Link>
        </div>
      </div>
      
      <GoalsList />
    </div>
  );
}