import { Card, CardContent } from '@heroui/react';

type Props = {
  lines?: number;
};

export function LoadingSkeleton({ lines = 3 }: Props) {
  return (
    <div className="flex flex-col gap-3">
      {Array.from({ length: lines }).map((_, i) => (
        <Card key={i} className="animate-pulse border border-default-100 bg-default-50/30">
          <CardContent className="p-5">
            <div className="h-4 w-3/4 rounded-lg bg-default-200/50" />
            {i < 2 && <div className="mt-3 h-3 w-1/2 rounded-lg bg-default-200/30" />}
          </CardContent>
        </Card>
      ))}
    </div>
  );
}
