"use client"

import type { ReactNode } from "react"
import { useTranslations } from "next-intl"

import { Skeleton } from "@/components/ui/skeleton"

export function QueryState({
  isLoading,
  isError,
  error,
  children,
  skeleton,
}: {
  isLoading: boolean
  isError: boolean
  error: Error | null
  children: ReactNode
  skeleton?: ReactNode
}) {
  const tc = useTranslations("Common")

  if (isLoading) {
    return (
      skeleton ?? (
        <div className="flex flex-col gap-3 px-4 lg:px-6">
          <Skeleton className="h-9 max-w-sm w-full" />
          <Skeleton className="h-64 w-full" />
        </div>
      )
    )
  }

  if (isError) {
    return (
      <div
        className="mx-4 lg:mx-6 rounded-lg border border-destructive/40 bg-destructive/10 px-4 py-3 text-destructive text-sm"
        role="alert"
      >
        <p className="font-medium">{tc("api.errorTitle")}</p>
        <p className="mt-1 text-destructive/90">
          {error?.message ?? tc("api.errorFallback")}
        </p>
      </div>
    )
  }

  return <>{children}</>
}