"use client";

export default function Header({ currentToken, previousToken, nextToken, missedTokens }) {
  // Extract missed tokens from props or calculate them
  const missedTokensList = missedTokens || "J-134, J-159"; // Default or from props

  return (
    <div className="flex grow flex-col items-center justify-between lg:flex-row lg:px-6 w-full">
      <div className="hidden sm:hidden md:hidden lg:block lg:gap-16 lg:w-full lg:px-6 lg:py-3 xl:flex xl:gap-4 xl:w-full xl:px-6 2xl:flex 2xl:gap-16 2xl:w-full 2xl:px-6">
        <div className="flex flex-col gap-3">
          <div className="grid grid-cols-4 gap-4">
            {[1, 2, 3, 4].map((item) => (
              <div
                key={item}
                className="border-2 rounded-[10px] px-2 py-2 flex flex-col gap-3 w-[10rem]"
              >
                <h2 className="text-[14px] text-[#667085]">Total Patients</h2>
                <div className="flex gap-5 -mt-1">
                  <p className="text-[25px]">345</p>
                  <p className="text-[8px] text-[#667085] mt-[18px]">
                    <span className="text-green-400">+25%</span> vs Last Week
                  </p>
                </div>
                <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
                  View List
                </button>
              </div>
            ))}
          </div>

          <div className="w-[43rem] h-[auto] border-2 rounded-[10px] px-2 py-2 flex flex-col gap-2">
            <h2 className="text-[14px] text-[#667085]">Missed Token</h2>
            <p className="text-[19px]">
              {missedTokensList}
            </p>
            <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[4px] w-full rounded-[4px]">
              View List
            </button>
          </div>
        </div>

        <div className="lg:border-2 lg:rounded-[10px] lg:px-6 lg:py-6 lg:w-[50%] lg:h-[auto] lg:flex-col lg:items-center lg:gap-5 lg:hidden xl:block xl:border-2 xl:rounded-[10px] xl:px-6 xl:py-6 xl:w-[50%] xl:h-[full] xl:flex xl:flex-col xl:items-center xl:gap-5 2xl:border-2 2xl:rounded-[10px] 2xl:px-8 2xl:pt-6 2xl:pb-8 2xl:w-[50%] 2xl:h-[15rem] 2xl:flex 2xl:flex-col 2xl:items-center 2xl:gap-5">
          <div>
            <h2 className="text-[14px] text-[#667085]">Current Token</h2>
            <p className="font-bold text-[25px] text-center">
              {currentToken || "---"}
            </p>
          </div>

          <div className="flex flex-row items-center gap-5 2xl:gap-[6rem]">
            <div>
              <h2 className="text-[14px] text-[#667085]">Previous Token</h2>
              <p className="font-bold text-red-500 text-[25px] text-center">
                {previousToken || "---"}
              </p>
            </div>
            <div>
              <h2 className="text-[14px] text-[#667085]">Next Token</h2>
              <p className="text-green-500 font-bold text-[25px] text-center">
                {nextToken || "---"}
              </p>
            </div>
          </div>

          <button className="bg-[#465FFF] text-white text-[8px] px-[24px] py-[6px] w-full rounded-[4px] 2xl:text-[12px]">
            View List
          </button>
        </div>
      </div>
    </div>
  );
}