import { useNavigate } from 'react-router-dom'
import FailIcon from '../components/FailIcon'

export default function AddEventFail() {
  const navigate = useNavigate()

  return (
    <div className="flex min-h-screen flex-col bg-white pb-32">
      <div className="h-16 w-full bg-gray-200" />

      <div className="flex flex-1 flex-col items-center justify-center px-6 text-center">
        <FailIcon />
        <h1 className="mt-6 text-xl font-light text-gray-900">ثبت ایونت با خطا مواجه شد. لطفا دوباره تلاش کنید.</h1>
      </div>

      <div className="fixed inset-x-0 bottom-0 flex flex-col gap-3 bg-white px-4 py-4">
        <button
          type="button"
          onClick={() => navigate('/owner/events/new')}
          className="w-full rounded-2xl bg-[#223D5D] py-4 text-lg font-semibold text-white"
        >
          افزودن ایونت
        </button>
        <button
          type="button"
          onClick={() => navigate('/owner/panel')}
          className="w-full rounded-2xl border border-[#223D5D] py-4 text-lg font-semibold text-[#223D5D]"
        >
          مشاهده پنل
        </button>
      </div>
    </div>
  )
}