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

function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="skeleton"
      className={cn('animate-pulse rounded-md bg-muted', className)}
      {...props}
    />
  );
}

/** Linha de texto — usada em qualquer trecho aguardando conteúdo textual. */
function SkeletonText({ className, ...props }: React.ComponentProps<'div'>) {
  return <Skeleton className={cn('h-4 w-full', className)} {...props} />;
}

/** Bloco de card — usada em grids de dashboard enquanto os dados carregam. */
function SkeletonCard({ className, ...props }: React.ComponentProps<'div'>) {
  return <Skeleton className={cn('h-32 w-full rounded-xl', className)} {...props} />;
}

/** Linha de tabela — usada pela `DataTable` no estado de loading. */
function SkeletonTableRow({ columns = 4 }: { columns?: number }) {
  return (
    <div className="flex items-center gap-4 border-b border-border px-2 py-3 last:border-0">
      {Array.from({ length: columns }).map((_, index) => (
        <Skeleton key={index} className="h-4 flex-1" />
      ))}
    </div>
  );
}

export { Skeleton, SkeletonText, SkeletonCard, SkeletonTableRow };