'use client'

import { useRouter } from 'next/navigation'
import { usePopupController } from '@/store/popupController'
import { useSuitable } from '@/hooks/useSuitable'

export default function SuitableDetailPopupButton() {
  const router = useRouter()
  const popupController = usePopupController()
  const { downloadSuitablePdf } = useSuitable()

  const handleClosePopup = () => {
    popupController.setSuitableDetailPopup(false)
  }

  const handleRedirectPage = (path: string) => {
    handleClosePopup()
    router.push(path)
  }

  return (
    <div className="float-btn-wrap">
      <div className="btn-flex-wrap com">
        <div className="btn-bx">
          <button className="btn-frame n-blue icon" onClick={handleClosePopup}>
            閉じる<i className="btn-arr"></i>
          </button>
        </div>
        <div className="btn-bx">
          <button className="btn-frame red icon" onClick={downloadSuitablePdf}>
            ウンロード<i className="btn-arr"></i>
          </button>
        </div>
        <div className="btn-bx">
          <button className="btn-frame n-blue icon" onClick={() => handleRedirectPage('/inquiry/regist')}>
            1：1お問い合わせ<i className="btn-arr"></i>
          </button>
        </div>
      </div>
    </div>
  )
}