components/ui/skeleton.tsx

import * as React from "react"
import { cn } from "@/lib/utils"

function Skeleton({

  className,

  ...props

}: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div

      className={cn("animate-pulse rounded-lg bg-muted", className)}

      {...props}

    />
  )
}

function SkeletonCard() {
  return (
    <div className="neu-card rounded-3xl p-6 space-y-4">

      <Skeleton className="h-48 w-full rounded-2xl" />

      <Skeleton className="h-4 w-1/3 rounded" />

      <Skeleton className="h-4 w-2/3 rounded" />

      <div className="flex gap-2">

        <Skeleton className="h-6 w-16 rounded-full" />

        <Skeleton className="h-6 w-16 rounded-full" />

        <Skeleton className="h-6 w-16 rounded-full" />

      </div>

    </div>
  )
}

function SkeletonTestimonial() {
  return (
    <div className="neu-card rounded-3xl p-6 space-y-4">

      <div className="flex gap-1">

        {[...Array(5)].map((_, i) => (

          <Skeleton key={i} className="h-4 w-4 rounded" />

        ))}

      </div>

      <Skeleton className="h-20 w-full rounded" />

      <div className="flex items-center gap-3">

        <Skeleton className="h-10 w-10 rounded-full" />

        <div className="space-y-2">

          <Skeleton className="h-3 w-24 rounded" />

          <Skeleton className="h-3 w-16 rounded" />

        </div>

      </div>

    </div>
  )
}

function SkeletonService() {
  return (
    <div className="neu-card rounded-3xl p-6 space-y-4">

      <Skeleton className="h-16 w-16 rounded-2xl" />

      <Skeleton className="h-6 w-2/3 rounded" />

      <Skeleton className="h-16 w-full rounded" />

    </div>
  )
}

function SkeletonStats() {
  return (
    <div className="neu-card rounded-3xl p-8 text-center space-y-3">

      <Skeleton className="h-12 w-24 mx-auto rounded" />

      <Skeleton className="h-4 w-32 mx-auto rounded" />

    </div>
  )
}

export { Skeleton, SkeletonCard, SkeletonTestimonial, SkeletonService, SkeletonStats }