"use client";

import { useState } from "react";
import { deleteSkillAction } from "./actions";
import { Trash2, Loader2 } from "lucide-react";

export function DeleteSkillButton({ id }: { id: string }) {
  const [loading, setLoading] = useState(false);

  async function handleDelete() {
    if (confirm("Delete this skill? This cannot be undone.")) {
      setLoading(true);
      await deleteSkillAction(id);
      setLoading(false);
    }
  }

  return (
    <button
      onClick={handleDelete}
      disabled={loading}
      className="p-2 text-muted-foreground hover:text-red-500 hover:bg-red-500/10 rounded-lg transition-colors disabled:opacity-50"
      title="Delete Skill"
    >
      {loading ? <Loader2 size={16} className="animate-spin" /> : <Trash2 size={16} />}
    </button>
  );
}
