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

interface SkeletonProps {
  className?: string
}

export function Skeleton({ className }: SkeletonProps) {
  return (
    <div
      className={cn(
        "animate-pulse rounded-md bg-gradient-to-r from-muted via-muted/50 to-muted bg-[length:200%_100%]",
        "animate-[shimmer_1.5s_ease-in-out_infinite]",
        className
      )}
      style={{
        backgroundImage: "linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)"
      }}
    />
  )
}

// Specific skeleton components for different profile sections
export function ProfileCardSkeleton() {
  return (
    <div className="bg-card p-6 rounded-lg border border-border">
      <div className="flex items-center justify-between mb-4">
        <Skeleton className="h-6 w-24" />
        <Skeleton className="h-8 w-12" />
      </div>
      <Skeleton className="h-4 w-full" />
    </div>
  )
}

export function AvatarSkeleton() {
  return (
    <div className="bg-card p-6 rounded-lg border border-border">
      <Skeleton className="h-6 w-32 mb-4" />
      <div className="flex flex-col items-center">
        <div className="relative">
          <Skeleton className="w-24 h-24 rounded-full" />
          <div className="absolute -bottom-2 -right-2 w-10 h-10 rounded-full bg-primary/20">
            <Skeleton className="w-full h-full rounded-full" />
          </div>
        </div>
        <Skeleton className="h-3 w-48 mt-2" />
      </div>
    </div>
  )
}

export function FormFieldSkeleton() {
  return (
    <div className="bg-card p-6 rounded-lg border border-border">
      <div className="flex items-center justify-between mb-4">
        <Skeleton className="h-6 w-20" />
        <Skeleton className="h-8 w-12" />
      </div>
      <Skeleton className="h-10 w-full" />
    </div>
  )
}

export function TextAreaSkeleton() {
  return (
    <div className="bg-card p-6 rounded-lg border border-border">
      <div className="flex items-center justify-between mb-4">
        <Skeleton className="h-6 w-16" />
        <Skeleton className="h-8 w-12" />
      </div>
      <Skeleton className="h-24 w-full" />
    </div>
  )
}