"use client"
import { Card, CardContent } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"

export function StaffCardSkeleton() {
  return (
    <Card className="shadow-none w-full">
      <CardContent className="px-6 flex flex-col h-full min-h-[280px]">
        {/* Header Section */}
        <div className="flex items-start justify-between mb-2">
          <div className="flex items-center gap-3 flex-1">
            {/* Avatar */}
            <Skeleton className="w-12 h-12 rounded-full shrink-0" />
            {/* Name and Title */}
            <div className="min-w-0 flex-1 space-y-1">
              <Skeleton className="h-5 w-24" />
              <Skeleton className="h-4 w-16" />
            </div>
          </div>
          <Skeleton className="w-8 h-8 rounded-full shrink-0" />
        </div>

        {/* Status & Services Info */}
        <div className="mb-6 space-y-2 mt-4">
          <div className="flex justify-between text-sm">
            <Skeleton className="h-4 w-12" />
            <Skeleton className="h-6 w-16 rounded-sm" />
          </div>
          <div className="flex justify-between text-sm">
            <Skeleton className="h-4 w-16" />
            <Skeleton className="h-4 w-20" />
          </div>
          <div className="text-sm space-y-1">
            <Skeleton className="h-4 w-32" />
            <div className="flex gap-1 mt-1 flex-wrap">
              <Skeleton className="h-5 w-16 rounded-sm" />
              <Skeleton className="h-5 w-20 rounded-sm" />
              <Skeleton className="h-5 w-14 rounded-sm" />
            </div>
          </div>
        </div>

        {/* Action Buttons - push to bottom on tall cards */}
        <div className="mt-auto w-full">
          <Skeleton className="h-10 w-full rounded-sm" />
        </div>
      </CardContent>
    </Card>
  )
}