'use client';
import { useState } from 'react';
import { PanoViewer } from './PanoViewer';

/** İzleme sayfasında 360° tur: düğmeye basınca tam ekran panorama açılır. */
export function TourButton({ src, className = '' }: { src: string; className?: string }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button type="button" onClick={() => setOpen(true)} className={className || 'flex items-center justify-center gap-1.5 bg-white px-4 py-3 text-[15px] font-bold text-ink'}>
        <span aria-hidden>◉</span> 360° tur
      </button>
      {open && (
        <div className="fixed inset-0 z-50 bg-black">
          <PanoViewer src={src} />
          <button type="button" onClick={() => setOpen(false)} aria-label="Turu kapat" className="absolute right-3 top-3 bg-white/90 px-3 py-2 text-[14px] font-bold text-ink">Kapat ✕</button>
          <div className="pointer-events-none absolute inset-x-0 bottom-4 text-center text-[12.5px] text-white/80">Sürükleyerek etrafına bakın · tekerlek ile yakınlaştırın</div>
        </div>
      )}
    </>
  );
}