export function LinesSkeleton({ lines = 20 }) {
  return (
    <div className="animate-pulse space-y-2">
      {Array.from({ length: lines }).map((_, i) => (
        <div key={i} className="h-4 bg-base-300 rounded" />
      ))}
    </div>
  );
}

export function CardsSkeleton({ count = 6 }) {
  return (
    <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 animate-pulse">
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="card bg-base-100 shadow-sm border border-base-300"
        >
          <div className="card-body p-4">
            <div className="h-4 w-16 bg-base-300 rounded mb-2" />
            <div className="h-5 w-2/3 bg-base-300 rounded mb-2" />
            <div className="h-3 w-24 bg-base-300 rounded" />
          </div>
        </div>
      ))}
    </div>
  );
}

export function TableSkeleton({ rows = 8, cols = 8 }) {
  return (
    <div className="overflow-auto">
      <table className="table w-full">
        <thead>
          <tr>
            {Array.from({ length: cols }).map((_, i) => (
              <th key={i}>
                <div className="h-4 bg-base-300 rounded w-16" />
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: rows }).map((_, r) => (
            <tr key={r}>
              {Array.from({ length: cols }).map((_, c) => (
                <td key={c}>
                  <div className="h-4 bg-base-300 rounded" />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
