import React from "react";
import { GlobalContext } from "@/context/Global";

const SidebarWorkspace = ({ ws, handleClick }) => {
  const {
    state: { path },
  } = React.useContext(GlobalContext);

  return (
    <>
      <div
        onClick={() => handleClick(ws.id)}
        className={`my-2 flex h-[2.8125rem] w-full items-center justify-start rounded p-[0.375rem_0.5rem_0.375rem_0] hover:bg-slate-300  ${Number(path) === ws.id ? "bg-slate-300" : ""
          }`}
      >
        <div className={`p-[0.375rem_0.5rem_0.375rem]`}>
          <div
            className={`flex h-[1.3215rem] w-[1.3215rem] items-center justify-center rounded bg-gradient-to-tr from-[#006644] to-[#00875a] text-[1rem] font-semibold uppercase text-white`}
          >
            {ws?.name[0]}
          </div>
        </div>
        <span className={`text-sm font-bold text-[#172B4D]`}>
          {ws?.name} <span> Workspace</span>
        </span>
      </div>
    </>
  );
};
export default SidebarWorkspace;
