import React, { useState } from "react";
import DownloadButton from "./DownloadButton";

export default function DownloadDropdown({ options, title, author }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div 
      className="relative"
      onMouseEnter={() => setIsOpen(true)}
      onMouseLeave={() => setIsOpen(false)}
    >
      <button
        type="button"
        className="flex items-center justify-center h-9 px-3 rounded-md bg-gray-100 text-gray-700 border-0 cursor-pointer hover:bg-gray-200 transition-all"
        aria-haspopup="true"
        aria-expanded={isOpen}
        onClick={() => setIsOpen(!isOpen)}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width={16}
          height={16}
          fill="none"
          viewBox="0 0 24 24"
          className={`transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
        >
          <path
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2.5}
            d="m19 9-7 7-7-7"
          />
        </svg>
      </button>
      
      {isOpen && (
        <div 
          className="absolute right-0 bottom-full mb-2 bg-white min-w-[180px] rounded-xl shadow-xl border border-gray-200 py-2 z-[100]"
          style={{ animation: 'fadeInUp 0.2s ease-out' }}
          onMouseEnter={() => setIsOpen(true)}
          onMouseLeave={() => setIsOpen(false)}
        >
          {/* Arrow pointing down */}
          <div className="absolute -bottom-1.5 right-4 w-3 h-3 bg-white border-r border-b border-gray-200 transform rotate-45 z-[100]"></div>
          
          {options.map((opt) => (
            <DownloadButton
              key={opt.label}
              label={opt.label}
              type={opt.type}
              url={opt.url}
              title={title}
              author={author}
            />
          ))}
        </div>
      )}
    </div>
  );
}