import React from 'react';

export function CardSkeleton() {
  return (
    <div className="bg-white dark:bg-zinc-900 rounded-3xl border border-zinc-200 dark:border-zinc-800 p-4 space-y-3 animate-pulse shadow-sm">
      <div className="h-48 rounded-2xl bg-zinc-200 dark:bg-zinc-800 w-full" />
      <div className="h-4 rounded-md bg-zinc-200 dark:bg-zinc-800 w-3/4" />
      <div className="h-3 rounded-md bg-zinc-200 dark:bg-zinc-800 w-1/2" />
      <div className="flex justify-between items-center pt-2">
        <div className="h-5 rounded-md bg-zinc-200 dark:bg-zinc-800 w-1/3" />
        <div className="h-8 w-8 rounded-xl bg-zinc-200 dark:bg-zinc-800" />
      </div>
    </div>
  );
}

export function GridSkeleton({ count = 4 }: { count?: number }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      {Array.from({ length: count }).map((_, i) => (
        <CardSkeleton key={i} />
      ))}
    </div>
  );
}