"use client"

import { cn } from "@/lib/utils"

export function PageLoader({ className }: { className?: string }) {
  return (
    <div className={cn("flex min-h-[40vh] items-center justify-center", className)}>
      <div className="relative">
        <div className="h-12 w-12 rounded-full border-4 border-transparent border-t-primary animate-spin" />
        <div className="absolute inset-0 h-12 w-12 rounded-full border-4 border-transparent border-b-primary/60 animate-spin [animation-duration:1.2s]" />
      </div>
    </div>
  )
}

export function InlineLoader({ className }: { className?: string }) {
  return (
    <span className={cn("inline-flex items-center gap-2", className)}>
      <span className="h-4 w-4 rounded-full border-2 border-t-primary border-transparent animate-spin" />
      <span className="text-sm text-muted-foreground">Loading…</span>
    </span>
  )
}