text: import { useRouter } from 'next/router'
  import Loader from '../../../components/Loader'
  import DefaultLayout from '../../../components/DefaultLayout'
  import PageContainer from '../../../components/PageContainer'
  import PlayerMuteForm from '../../../components/PlayerMuteForm'
  import ErrorLayout from '../../../components/ErrorLayout'
  import PageHeader from '../../../components/PageHeader'
  import { fromNow, useApi } from '../../../utils'
  
  export default function Page () {
    const router = useRouter()
    const [serverId, id] = router.query.id?.split('-') || []
    const { loading, data, errors } = useApi({
      query: !serverId || !id
        ? null
        : `query playerMute($id: ID!, $serverId: ID!) {
      playerMute(id: $id, serverId: $serverId) {
        id
        reason
        expires
        soft
        created
        player {
          id
          name
        }
        server {
          id
          name
        }
      }
    }`,
      variables: { id, serverId }
    })
  
    if (loading) return <DefaultLayout title='Loading...'><Loader /></DefaultLayout>
    if (errors || !data) return <ErrorLayout errors={errors} />
  
    const query = `mutation updatePlayerMute($id: ID!, $serverId: ID!, $input: UpdatePlayerMuteInput!) {
      updatePlayerMute(id: $id, serverId: $serverId, input: $input) {
        id
      }
    }`
  
    return (
      <DefaultLayout title={`Update ${data.playerMute.player.name} mute`}>
        <PageContainer>
          <div className='mx-auto flex flex-col w-full max-w-md px-4 py-8 sm:px-6 md:px-8 lg:px-10 text-center md:border-2 md:rounded-lg md:border-black'>
            <PageHeader title='Edit mute' subTitle={`Created ${fromNow(data.playerMute.created)}`} />
            <PlayerMuteForm
              defaults={data.playerMute}
              query={query}
              parseVariables={(input) => ({
                id,
                serverId,
                input: {
                  reason: input.reason,
                  expires: Math.floor(input.expires / 1000),
                  soft: input.soft
                }
              })}
              disableServers
              onFinished={() => router.push(`/player/${data.playerMute.player.id}`)}
            />
          </div>
        </PageContainer>
      </DefaultLayout>
    )
  }
  