import React from "react";

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

export const BranchDetailsSkeleton = () => {
  return (
    <div className="w-100">
      <div className="d-flex mb-3">
        <SkeletonLine height={22} width="280px" />
      </div>

      <div className="row mb-2">
        <div className="col-4">
          <SkeletonLine height={16} width="70%" />
        </div>
        <div className="col-8">
          <SkeletonLine height={16} />
        </div>
      </div>

      <div className="row mb-2">
        <div className="col-4">
          <SkeletonLine height={16} width="70%" />
        </div>
        <div className="col-8">
          <SkeletonLine height={16} />
        </div>
      </div>

      <div className="row mb-2">
        <div className="col-4">
          <SkeletonLine height={16} width="70%" />
        </div>
        <div className="col-8">
          <SkeletonLine height={16} />
        </div>
      </div>

      <div className="row mb-2">
        <div className="col-4">
          <SkeletonLine height={16} width="70%" />
        </div>
        <div className="col-8">
          <SkeletonLine height={16} width="90%" />
        </div>
      </div>

      <div className="row mb-2">
        <div className="col-4">
          <SkeletonLine height={16} width="70%" />
        </div>
        <div className="col-8 d-flex gap-2 align-items-center">
          <SkeletonLine height={16} width="60%" />
          <SkeletonLine height={16} width="20px" />
        </div>
      </div>
    </div>
  );
};

export const JobDetailsSkeleton = () => {
  return (
    <div className="row text-start">
      <div className="col-12">
        {/* Title */}
        <SkeletonLine height={24} width="50%" />

        {/* Job ID + Status */}
        <div className="d-flex justify-content-between align-items-start flex-wrap mb-3 mt-2">
          <SkeletonLine height={18} width="30%" />
          <div className="d-flex flex-row gap-2">
            <SkeletonLine height={22} width="70px" />
            <SkeletonLine height={22} width="22px" />
          </div>
        </div>

        {/* Description */}
        <SkeletonLine height={40} width="100%" />

        {/* Created Date */}
        <div className="d-flex my-3">
          <SkeletonLine height={16} width="40%" />
        </div>

        {/* Start / Due Date */}
        <div className="d-flex justify-content-between mb-4">
          <SkeletonLine height={16} width="50%" />
          <SkeletonLine height={22} width="70px" />
        </div>

        {/* Branch Name */}
        <div className="d-flex flex-row gap-3 my-2">
          <SkeletonLine height={16} width="30%" />
          <SkeletonLine height={16} width="40%" />
        </div>

        {/* Created By */}
        <div className="row align-items-center my-3">
          <div className="col-12 col-md-auto mb-2">
            <SkeletonLine height={16} width="80px" />
          </div>

          <div className="col d-flex align-items-center gap-2">
            <SkeletonLine height={30} width="30px" /> {/* Avatar */}
            <SkeletonLine height={16} width="40%" />
          </div>
        </div>

        {/* Assigned To */}
        <div className="row mt-2">
          <div className="col-12 col-md-auto mb-2">
            <SkeletonLine height={16} width="90px" />
          </div>
        </div>

        {/* Tabs */}
        <div className="mt-4">
          <div className="d-flex gap-3 mb-3">
            <SkeletonLine height={35} width="80px" />
            <SkeletonLine height={35} width="80px" />
            <SkeletonLine height={35} width="80px" />
          </div>

          <SkeletonLine height={150} width="100%" />
        </div>
      </div>
    </div>
  );
};