'use client';

import { useFetch } from 'use-a-hook';

type ServiceStatus = { message: string };
export default function ServiceStatusCard() {
  const request = useFetch<ServiceStatus>('/api/service-status');
  return (
    <section>
      <button disabled={request.loading} onClick={() => void request.refetch()}>
        Refresh status
      </button>
      {request.loading && <p role="status">Checking…</p>}
      {request.error && <p role="alert">{request.error.message}</p>}
      {request.data && <p>{request.data.message}</p>}
    </section>
  );
}