import React from "react";

const SubscriptionPlanSkeleton = () => {
  return (
    <div className="col-xl-4 col-lg-6 col-md-6">
      <div className="card h-100 shadow-sm border-0 p-3 text-center">
        {/* Header */}
        <div className="mb-3">
          <div className="bg-light rounded-circle mx-auto mb-3" style={{ width: "50px", height: "50px" }}></div>
          <div className="bg-light rounded w-75 mx-auto mb-2" style={{ height: "20px" }}></div>
          <div className="bg-light rounded w-50 mx-auto" style={{ height: "16px" }}></div>
        </div>

        {/* Price */}
        <div className="mb-3">
          <div className="bg-light rounded w-50 mx-auto" style={{ height: "24px" }}></div>
        </div>

        {/* Storage & Trial */}
        <div className="d-flex justify-content-center gap-4 mb-5">
          <div className="bg-light rounded" style={{ width: "100px", height: "16px" }}></div>
          <div className="bg-light rounded" style={{ width: "100px", height: "16px" }}></div>
        </div>

        {/* Features */}
        <h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-center">
          Features
        </h6>
        <ul className="list-unstyled text-start mb-4 ms-7">
          {[1, 2, 3].map((i) => (
            <li key={i} className="mb-3">
              <div className="bg-light rounded" style={{ width: "70%", height: "16px" }}></div>
            </li>
          ))}
        </ul>

        {/* Button */}
        <div className="bg-light rounded w-100" style={{ height: "40px" }}></div>
      </div>
    </div>
  );
};

export default SubscriptionPlanSkeleton;