import React from "react";
import { LinearProgressIndicator } from "components/ui";

export const EmptyCycle = () => {
  const emptyCycleData = [
    {
      id: 1,
      name: "backlog",
      value: 20,
      color: "#DEE2E6",
    },
    {
      id: 2,
      name: "unstarted",
      value: 14,
      color: "#26B5CE",
    },
    {
      id: 3,
      name: "started",
      value: 27,
      color: "#F7AE59",
    },
    {
      id: 4,
      name: "cancelled",
      value: 15,
      color: "#D687FF",
    },
    {
      id: 5,
      name: "completed",
      value: 14,
      color: "#09A953",
    },
  ];
  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-5 ">
      <div className="relative h-32 w-72">
        <div className="absolute right-0 top-0 flex w-64 flex-col rounded-[10px] bg-white text-xs shadow">
          <div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
            <span className="text-sm font-semibold text-black">Cycle Name</span>
            <div className="flex h-full w-full items-center gap-4">
              <span className="h-2 w-20 rounded-full bg-gray-200" />
              <span className="h-2 w-20 rounded-full bg-gray-200" />
            </div>
          </div>

          <div className="border-t border-gray-200 bg-gray-100 px-4 py-3">
            <LinearProgressIndicator data={emptyCycleData} />
          </div>
        </div>

        <div className="absolute left-0 bottom-0 flex w-64 flex-col rounded-[10px] bg-white text-xs shadow">
          <div className="flex flex-col items-start justify-center gap-2.5 p-3.5">
            <span className="text-sm font-semibold text-black">Cycle Name</span>
            <div className="flex h-full w-full items-center gap-4">
              <span className="h-2 w-20 rounded-full bg-gray-200" />
              <span className="h-2 w-20 rounded-full bg-gray-200" />
            </div>
          </div>

          <div className="border-t border-gray-200 bg-gray-100 px-4 py-3">
            <LinearProgressIndicator data={emptyCycleData} />
          </div>
        </div>
      </div>

      <div className="flex flex-col items-center justify-center gap-4 text-center ">
        <h3 className="text-xl font-semibold">Create New Cycle</h3>
        <p className="text-sm text-gray-500">
          Sprint more effectively with Cycles by confining your project <br /> to a fixed amount of
          time. Create new cycle now.
        </p>
      </div>
    </div>
  );
};