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 }