import React from "react";

export default function PreviewButton({ url }) {
  return (
    <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-all duration-300 ease-out group-hover:opacity-100 group-hover:scale-100">
      <a
        href={url}
        target="_blank"
        rel="noopener noreferrer"
        title="View More"
        className="flex items-center justify-center w-12 h-12 rounded-full bg-white/93 text-[#3c3636] border-0 cursor-pointer hover:bg-white/80 transition-colors"
      >
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width={24}
          height={24}
          fill="none"
          viewBox="0 0 24 24"
          className="block w-5 h-5"
        >
          <path
            stroke="currentColor"
            strokeWidth={2}
            d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"
          />
          <path
            stroke="currentColor"
            strokeWidth={2}
            d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
          />
        </svg>
      </a>
    </div>
  );
}