import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

export default function GoalTracker() {
  const [goal, setGoal] = useState("");
  const [goals, setGoals] = useState([]);

  const addGoal = () => {
    if (goal.trim() === "") return;
    setGoals([...goals, { text: goal, completed: false }]);
    setGoal("");
  };

  const completeGoal = (index) => {
    const updatedGoals = [...goals];
    updatedGoals[index].completed = true;
    setGoals(updatedGoals);
  };

  return (
    <div className="p-6 max-w-xl mx-auto">
      <h1 className="text-3xl font-bold mb-4">My Goals</h1>
      <div className="flex gap-2 mb-4">
        <input
          type="text"
          value={goal}
          onChange={(e) => setGoal(e.target.value)}
          placeholder="Write your goal here"
          className="flex-1 p-2 rounded border"
        />
        <Button onClick={addGoal}>Add</Button>
      </div>

      <div className="space-y-3">
        {goals.map((g, i) => (
          <Card key={i} className={g.completed ? "opacity-50" : ""}>
            <CardContent className="flex items-center justify-between p-4">
              <span className={g.completed ? "line-through" : ""}>{g.text}</span>
              {!g.completed && (
                <Button onClick={() => completeGoal(i)} size="sm">
                  Complete
                </Button>
              )}
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}