"use client"

import React from "react"
import { Skeleton } from "@/components/ui/skeleton"

/**
 * Skeleton loader for individual member row
 * Mimics the member list item structure
 */
const MemberRowSkeleton: React.FC = () => (
  <div className="flex items-center justify-between p-4 bg-card rounded-xl border border-border">
    <div className="flex items-center gap-3 flex-1">
      {/* Avatar skeleton */}
      <Skeleton className="h-10 w-10 rounded-full" />

      {/* Member info skeleton */}
      <div className="flex-1">
        <Skeleton className="h-4 w-32 mb-1.5" />
        <Skeleton className="h-3 w-24" />
      </div>
    </div>

    <div className="flex items-center gap-3">
      {/* Role badge skeleton */}
      <Skeleton className="h-6 w-16 rounded-full" />
      {/* Action button skeleton */}
      <Skeleton className="h-8 w-8 rounded-md" />
    </div>
  </div>
)

/**
 * Complete Members Page Skeleton Loader
 * Displays skeleton placeholders for the members page or tab
 * Used while member data is being fetched
 */
export const MembersSkeleton: React.FC<{ count?: number }> = ({ count = 5 }) => {
  return (
    <div className="space-y-4">
      {/* Header skeleton */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <Skeleton className="h-7 w-32 sm:w-40 mb-2" />
          <Skeleton className="h-4 w-48 sm:w-64" />
        </div>
        <Skeleton className="h-9 w-28 rounded-lg" />
      </div>

      {/* Search and filter skeleton */}
      <div className="flex flex-col sm:flex-row gap-3 mb-4">
        <Skeleton className="h-10 flex-1 rounded-lg" />
        <Skeleton className="h-10 w-32 rounded-lg" />
      </div>

      {/* Member rows skeleton */}
      <div className="space-y-3">
        {[...Array(count)].map((_, index) => (
          <MemberRowSkeleton key={index} />
        ))}
      </div>
    </div>
  )
}

/**
 * Compact members skeleton for smaller sections
 * Useful for loading states in tabs or smaller containers
 */
export const CompactMembersSkeleton: React.FC = () => {
  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between mb-4">
        <Skeleton className="h-6 w-28" />
        <Skeleton className="h-8 w-24 rounded-lg" />
      </div>

      {[...Array(3)].map((_, index) => (
        <MemberRowSkeleton key={index} />
      ))}
    </div>
  )
}
