import { AlertTriangle, Loader2 } from 'lucide-react'
import type { ReactNode } from 'react'
import { errorMessage } from '../lib/api'

export function Loading({ label = 'Loading…' }: { label?: string }) {
  return (
    <div className="flex items-center justify-center gap-2 p-10 text-xs text-muted" role="status">
      <Loader2 size={16} className="animate-spin" /> {label}
    </div>
  )
}

export function ErrorMessage({ error, className = '' }: { error: unknown; className?: string }) {
  if (!error) return null
  return (
    <div role="alert" className={`flex items-start gap-2 rounded-[5px] border border-coral-soft bg-[#fff6f3] px-3 py-2.5 text-xs text-coral-strong ${className}`}>
      <AlertTriangle size={15} className="mt-px flex-none" />
      <span>{errorMessage(error)}</span>
    </div>
  )
}

export function Empty({ children }: { children: ReactNode }) {
  return <div className="px-6 py-10 text-center text-xs text-muted">{children}</div>
}