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

export function ServiceCardSkeleton() {
  return (
    <Card className="w-full animate-pulse">
      <CardContent className="px-6">
        <div className="flex items-start justify-between mb-2">
          <div className="space-y-2 w-full">
            <div className="h-5 bg-gray-200 rounded w-3/4 dark:bg-gray-700" />
            <div className="h-3 bg-gray-200 rounded w-full mt-2 dark:bg-gray-700" />
          </div>
        </div>

        <div className="mb-6 space-y-2 mt-4">
          <div className="flex justify-between text-sm">
            <div className="h-4 bg-gray-200 rounded w-1/3 dark:bg-gray-700" />
            <div className="h-4 bg-gray-200 rounded w-1/4 dark:bg-gray-700" />
          </div>
          <div className="flex justify-between text-sm">
            <div className="h-4 bg-gray-200 rounded w-1/3 dark:bg-gray-700" />
            <div className="h-4 bg-gray-200 rounded w-1/4 dark:bg-gray-700" />
          </div>
          <div className="flex justify-between text-sm">
            <div className="h-4 bg-gray-200 rounded w-1/3 dark:bg-gray-700" />
            <div className="h-4 bg-gray-200 rounded w-1/4 dark:bg-gray-700" />
          </div>
        </div>

        <div className="mt-auto flex gap-3 w-full">
          <div className="h-10 bg-gray-200 rounded w-full dark:bg-gray-700" />
        </div>
      </CardContent>
    </Card>
  )
}