import React, { useState } from 'react';

export default function GifDownloadButton({ onClick, title, isCapturing }) {
  return (
    <button
      onClick={onClick}
      className="absolute bottom-4 right-14 p-2 bg-black hover:bg-white/20 rounded-full transition-colors group"
      title={title}
      disabled={isCapturing}
    >
      <div className="relative">
        <svg
          className={`w-5 h-5 text-white ${isCapturing ? 'opacity-50' : ''}`}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
          />
        </svg>
        {isCapturing && (
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
          </div>
        )}
      </div>
      <div className="absolute bottom-full mb-1 right-0 scale-0 transition-all rounded bg-white/20 p-2 text-xs text-white group-hover:scale-100 whitespace-nowrap pointer-events-none">
        {isCapturing ? 'Capturing GIF...' : title}
      </div>
    </button>
  );
}