import React from "react";

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

export const NoteCardSkeleton = () => {
  return (
    <div className="mt-5">
      {Array.from({ length: 3 }).map((_, idx) => (
        <div key={idx} className="card shadow-sm border-1 mb-3 p-3 rounded">
          <div className="d-flex justify-content-between align-items-center mb-1">
            <div className="d-flex align-items-center">
              <div
                className="skeleton rounded-circle me-2"
                style={{ width: 32, height: 32 }}
              ></div>
              <div>
                <SkeletonLine height={10} width="150px" />
                <SkeletonLine height={10} width="100px" />
              </div>
            </div>

            {/* Action Icons */}
            <div className="d-flex gap-2">
              <div
                className="skeleton rounded"
                style={{ width: 20, height: 20 }}
              ></div>
              <div
                className="skeleton rounded"
                style={{ width: 20, height: 20 }}
              ></div>
            </div>
          </div>

          <hr className="mt-0 mb-2" />

          {/* Note Content */}
          <div className="mx-4 px-2 text-start">
            <SkeletonLine height={16} width="90%" />
            <SkeletonLine height={16} width="80%" />
          </div>
        </div>
      ))}
    </div>
  );
};

export const MainDirectoryPageSkeleton = () => {
  return (
    <div className="container-fluid">
      <div className="mt-5 card shadow-sm border-1 mb-3 p-3 rounded">
        {/* Tabs & Export */}
        <div className="d-flex justify-content-between align-items-center mb-3 px-2">
          <div className="d-flex gap-3">
            <SkeletonLine height={30} width="80px" />
            <SkeletonLine height={30} width="90px" />
          </div>
          <SkeletonLine height={30} width="100px" />
        </div>

        {/* Search / Controls */}
      </div>

      <NoteCardSkeleton />
    </div>
  );
};
// 32702.75

// Skeleton for ListViewContact
export const ListViewContactSkeleton = ({ rows = 5 }) => {
  const columns = ["Name", "Email", "Organization", "Category", "Action"];

  return (
    <div className="mt-5">
      <div className="card">
        <div className="card-datatable table-responsive">
          <table className="table border-top dataTable text-nowrap">
            <thead>
              <tr className="shadow-sm">
                {columns.map((col) => (
                  <th key={col} className="text-center">
                    <SkeletonLine height={20} width="80px" />
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="px-2">
              {Array.from({ length: rows }).map((_, idx) => (
                <tr key={idx}>
                  {/* Name / Avatar */}
                  <td className="px-2 py-3">
                    <div className="d-flex align-items-center gap-2">
                      <div
                        className="skeleton rounded-circle"
                        style={{ width: 32, height: 32 }}
                      ></div>
                      <SkeletonLine height={12} width="100px" />
                    </div>
                  </td>

                  {/* Email */}
                  <td className="px-2 py-3">
                    <SkeletonLine height={12} width="120px" />
                  </td>

                  {/* Organization */}
                  <td className="px-2 py-3">
                    <SkeletonLine height={12} width="120px" />
                  </td>

                  {/* Category */}
                  <td className="px-2 py-3">
                    <SkeletonLine height={12} width="100px" />
                  </td>

                  {/* Actions */}
                  <td className="px-2 py-3 text-center">
                    <div className="d-flex justify-content-center gap-2">
                      <div
                        className="skeleton rounded"
                        style={{ width: 20, height: 20 }}
                      ></div>
                      <div
                        className="skeleton rounded"
                        style={{ width: 20, height: 20 }}
                      ></div>
                      <div
                        className="skeleton rounded"
                        style={{ width: 20, height: 20 }}
                      ></div>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export const CardViewContactSkeleton = ({ rows = 6 }) => {
  return (
    <div className="row mt-3">
      {Array.from({ length: rows }).map((_, idx) => (
        <div key={idx} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
          <div className="card text-start border-1 h-100">
            {/* Header */}
            <div className="card-body px-2 py-2">
              <div className="d-flex justify-content-between align-items-center mb-2">
                <div className="d-flex align-items-center gap-2">
                  <div
                    className="skeleton rounded-circle"
                    style={{ width: 32, height: 32 }}
                  />
                  <SkeletonLine height={14} width="120px" />
                </div>
                <div className="d-flex gap-2">
                  <div
                    className="skeleton rounded"
                    style={{ width: 20, height: 20 }}
                  />
                  <div
                    className="skeleton rounded"
                    style={{ width: 20, height: 20 }}
                  />
                </div>
              </div>
              <SkeletonLine height={12} width="150px" />
            </div>

            {/* Footer */}
            <div className="card-footer px-3 py-2">
              <SkeletonLine height={12} width="80%" className="mb-1" />
              <SkeletonLine height={12} width="60%" className="mb-1" />
              <SkeletonLine height={12} width="70%" className="mb-1" />
              <div className="d-flex gap-1 mt-1">
                {Array.from({ length: 3 }).map((_, i) => (
                  <div
                    key={i}
                    className="skeleton rounded"
                    style={{ width: 50, height: 20 }}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};


export const ContactProfileSkeleton = () => {
  return (
    <div className="p-1">
      {/* Header */}
      <div className="text-center m-0 p-0 mb-3">
        <SkeletonLine width="120px" height={20} className="mx-auto" />
      </div>

      {/* Avatar and Name */}
      <div className="d-flex align-items-center mb-3">
        <div className="skeleton rounded-circle" style={{ width: 40, height: 40 }} />
        <div className="d-flex flex-column text-start ms-2">
          <SkeletonLine width="120px" height={14} />
          <SkeletonLine width="80px" height={12} className="mt-1" />
        </div>
      </div>

      {/* Two-column details */}
      <div className="row ms-9">
        <div className="col-12 col-md-6 d-flex flex-column text-start">
          {Array.from({ length: 5 }).map((_, idx) => (
            <div key={idx} className="d-flex mb-2 align-items-start">
              <SkeletonLine width="100px" height={12} className="me-2" />
              <SkeletonLine width="150px" height={12} />
            </div>
          ))}
        </div>

        <div className="col-12 col-md-6 d-flex flex-column text-start">
          {Array.from({ length: 5 }).map((_, idx) => (
            <div key={idx} className="d-flex mb-2 align-items-start">
              <SkeletonLine width="100px" height={12} className="me-2" />
              <SkeletonLine width="150px" height={12} />
            </div>
          ))}
        </div>
      </div>

      {/* Projects */}
      

      {/* Description */}
      <div className="d-flex mb-2 align-items-start" style={{ marginLeft: "3rem" }}>
        <SkeletonLine width="100px" height={12} className="me-2" />
        <SkeletonLine width="100%" height={50} />
      </div>

      <hr className="my-1" />

      {/* Notes Section */}
      {Array.from({ length: 3 }).map((_, idx) => (
        <div key={idx} className="mb-2">
          <SkeletonLine  width="100%" height={60} className="mb-1" />
        </div>
      ))}
    </div>
  );
};

export const NoetCard =({cards = 2})=>{
  return(
    <div className="row">
      {Array.from({ length: cards }).map((_, idx) => (
        <div key={idx} className="mb-2">
          <SkeletonLine  width="100%" height={60} className="mb-1" />
        </div>
      ))}
    </div>
  )
}