import React from "react";
import VersionListSkeleton from "./VersionListSkeleton";

const SkeletonLine = ({ height = 16, width = "100%", className = "" }) => (
  <div
    className={`skeleton mb-2 ${className}`}
    style={{
      height,
      width,
      borderRadius: 4,
    }}
  ></div>
);

const DocumentDetailsSkeleton = () => {
  return (
    <div className="p-1">
      <p className="fw-bold fs-6">Document Details</p>

      {/* Row 1 */}
      <div className="row mb-2">
        <div className="col-12 col-md-6">
          <div className="d-flex gap-2">
            <SkeletonLine width="130px" />
            <SkeletonLine width="60%" />
          </div>
        </div>
        <div className="col-12 col-md-6">
          <div className="d-flex gap-2">
            <SkeletonLine width="130px" />
            <SkeletonLine width="50%" />
          </div>
        </div>
      </div>

      {/* Row 2 */}
      <div className="row mb-2">
        <div className="col-12 col-md-6">
          <div className="d-flex gap-2">
            <SkeletonLine width="130px" />
            <SkeletonLine width="40%" />
          </div>
        </div>
        <div className="col-12 col-md-6">
          <div className="d-flex gap-2">
            <SkeletonLine width="130px" />
            <SkeletonLine width="60%" />
          </div>
        </div>
      </div>

      {/* Row 3 */}
      <div className="row mb-2">
        <div className="col-12 col-md-6">
          <div className="d-flex gap-2">
            <SkeletonLine width="130px" />
            <SkeletonLine width="40%" />
          </div>
        </div>
        <div className="col-12 col-md-6">
          <div className="d-flex gap-2">
            <SkeletonLine width="130px" />
            <SkeletonLine width="50%" />
          </div>
        </div>
      </div>

      

      {/* Row 6 - Description */}
      <div className="row mb-2">
        <div className="col-12">
          <div className="d-flex">
          
            <SkeletonLine width="100%" height={40} />
          </div>
        </div>
      </div>

      {/* Version list skeleton */}
      <div className="row text-start py-2">
        <VersionListSkeleton items={2} />
      </div>
    </div>
  );
};

export default DocumentDetailsSkeleton;