const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
  <div
    className={`skeleton mb-2 ${className}`}
    style={{
      height,
      width,
    }}
  ></div>
);
export const OrgCardSkeleton = () => {
  return (
    <div className="row p-3">
      {[...Array(1)].map((_, idx) => (
        <div
          key={idx}
          className="list-group-item d-flex flex-row gap-2 align-items-start border-0 shadow-sm rounded mb-3 p-3"
        >
          {/* Left: Logo/avatar placeholder */}
          <div className="mt-1">
            <SkeletonLine height={50} width={50} className="rounded-circle" />
          </div>

          {/* Right: Info section */}
          <div className="d-flex flex-column flex-grow-1 text-start">
            {/* Org name */}
            <SkeletonLine height={18} width="160px" className="mb-2" />

            {/* SPRID */}
            <div className="d-flex gap-2 mb-2">
              <SkeletonLine height={14} width="60px" />
              <SkeletonLine height={14} width="100px" />
            </div>

            {/* Address */}
            <div className="d-flex gap-2">
              <SkeletonLine height={14} width="70px" />
              <SkeletonLine height={14} width="100%" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};


export const OrgDetailsSkeleton = () => {
  return (
    <div className="row text-start p-3">
      {/* Header */}
      <div className="col-12 mb-3">
        <div className="d-flex justify-content-between align-items-center">
          {/* Logo + Name */}
          <div className="d-flex flex-row gap-2 align-items-center">
            <SkeletonLine height={40} width={40} className="rounded-circle" />
            <SkeletonLine height={18} width="180px" />
          </div>

          {/* Status Badge */}
          <SkeletonLine height={20} width="70px" className="rounded-pill" />
        </div>
      </div>

      {/* Section Title */}
      <div className="d-flex text-secondary mb-2">
        <SkeletonLine height={16} width="140px" />
      </div>

      {/* Contact Person */}
      <div className="col-md-6 mb-3">
        <div className="d-flex">
          <SkeletonLine height={16} width="130px" className="me-2" />
          <SkeletonLine height={16} width="140px" />
        </div>
      </div>

      {/* Contact Number */}
      <div className="col-md-6 mb-3">
        <div className="d-flex">
          <SkeletonLine height={16} width="130px" className="me-2" />
          <SkeletonLine height={16} width="140px" />
        </div>
      </div>

      {/* Email */}
      <div className="col-md-12 mb-3">
        <div className="d-flex">
          <SkeletonLine height={16} width="130px" className="me-2" />
          <SkeletonLine height={16} width="220px" />
        </div>
      </div>

      {/* SPRID */}
      <div className="col-6 mb-3">
        <div className="d-flex">
          <SkeletonLine height={16} width="130px" className="me-2" />
          <SkeletonLine height={16} width="160px" />
        </div>
      </div>

      {/* Employees */}
      <div className="col-6 mb-3">
        <div className="d-flex">
          <SkeletonLine height={16} width="130px" className="me-2" />
          <SkeletonLine height={16} width="60px" />
        </div>
      </div>

      {/* Address */}
      <div className="col-12 mb-3">
        <div className="d-flex">
          <SkeletonLine height={16} width="130px" className="me-2" />
          <SkeletonLine height={16} width="100%" />
        </div>
      </div>

      {/* Section Title 2 */}
      <div className="d-flex text-secondary mb-2">
        <SkeletonLine height={16} width="200px" />
      </div>
    </div>
  );
};