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

export default function CashbackFaqSkeleton() {
  return (
    <div className="col-xxl-4 col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12">
      {/* Cashback card skeleton (desktop-only just like your UI) */}
      <div className="card cashback-terms-card shadow mb-3 d-md-block d-none">
        <div className="card-header bg-second p-3">
          <div className="row align-items-center">
            {/* cashback icon */}
            <div className="col-2 pe-0">
              <div className="rounded" style={shimmer(50, "50px")} />
            </div>

            {/* cashback value */}
            <div className="col-9">
              <div className="rounded" style={shimmer(24, "80%")} />
            </div>

            {/* info icon */}
            <div className="col-1 ps-0">
              <div className="rounded" style={shimmer(20, "20px")} />
            </div>
          </div>
        </div>

        <div className="card-body bg-white">
          <ul className="ps-0 mb-0">
            <li>
              <div className="rounded mb-2" style={shimmer(14, "90%")} />
            </li>
            <li>
              <div className="rounded" style={shimmer(14, "70%")} />
            </li>
          </ul>
        </div>
      </div>

      {/* FAQ Skeleton */}
      <div className="merchant-details bg-white border justify-content-center rounded-3 p-3 shadow-sm">
        <div className="rounded mb-2" style={shimmer(20, "40%")} /> {/* FAQ title */}
        <hr className="my-1" />

        {/* FAQ content lines */}
        <div className="rounded mb-2" style={shimmer(14, "100%")} />
        <div className="rounded mb-2" style={shimmer(14, "95%")} />
        <div className="rounded mb-2" style={shimmer(14, "85%")} />
        <div className="rounded mb-2" style={shimmer(14, "92%")} />
        <div className="rounded mb-2" style={shimmer(14, "80%")} />
      </div>

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

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;
}