"use client";
import React from "react";

export default function PeopleAlsoLikeSkeleton() {
  // each column shows around 6 links — matching your UI pattern
  const listCount = 6;

  return (
    <section className="py-4">
      <div className="container">
        <div className="row justify-content-center popular-list">

          {/* Column 1 */}
          <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12 mb-4">
            {/* Title skeleton */}
            <div className="rounded mb-3" style={shimmer(18, "60%")} />

            <ul className="ps-0">
              {[...Array(listCount)].map((_, idx) => (
                <li key={idx} className="mb-2">
                  <div className="rounded" style={shimmer(14, "70%")} />
                </li>
              ))}
            </ul>
          </div>

          {/* Column 2 */}
          <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12 mb-4">
            <div className="rounded mb-3" style={shimmer(18, "60%")} />

            <ul className="ps-0">
              {[...Array(listCount)].map((_, idx) => (
                <li key={idx} className="mb-2">
                  <div className="rounded" style={shimmer(14, "70%")} />
                </li>
              ))}
            </ul>
          </div>

          {/* Column 3 */}
          <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12 mb-4">
            <div className="rounded mb-3" style={shimmer(18, "60%")} />

            <ul className="ps-0">
              {[...Array(listCount)].map((_, idx) => (
                <li key={idx} className="mb-2">
                  <div className="rounded" style={shimmer(14, "70%")} />
                </li>
              ))}
            </ul>
          </div>

        </div>
      </div>

      <style jsx>{`
        @keyframes shimmer {
          0% { background-position: -200% 0; }
          100% { background-position: 200% 0; }
        }
      `}</style>
    </section>
  );
}

function shimmer(height: number, width: string | number) {
  return {
    height: `${height}px`,
    width: typeof width === "number" ? `${width}px` : width,
    background: "linear-gradient(90deg, #eee, #f7f7f7, #eee)",
    backgroundSize: "200% 100%",
    animation: "shimmer 1.5s infinite",
  } as React.CSSProperties;
}