'use client'

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

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

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

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

  return (
    <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={() => handleRedirectPage('/pdf/suitable')}>
          ウンロード<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>
  )
}
