'use client';

import { useState } from 'react';

export default function DeleteDesignButton({ designId }: { designId: string }) {
  const [deleting, setDeleting] = useState(false);

  const handleDelete = async (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();

    if (!confirm('Delete this design? This cannot be undone.')) return;

    setDeleting(true);
    try {
      const res = await fetch(`/api/designs/${designId}`, { method: 'DELETE' });
      if (res.ok) {
        window.location.reload();
      } else {
        alert('Failed to delete design');
        setDeleting(false);
      }
    } catch (err) {
      console.error('Error deleting design:', err);
      alert('Error deleting design');
      setDeleting(false);
    }
  };

  return (
    <button
      onClick={handleDelete}
      disabled={deleting}
      className="border border-line px-3 py-2 text-sm text-muted hover:border-ink hover:text-ink disabled:opacity-50"
    >
      {deleting ? 'Deleting…' : 'Delete'}
    </button>
  );
}