import React, { useState } from "react";
import EditModal from "../EditModal";
import DeleteModal from "../DeleteModal";
import { IconEdit, IconTrash } from "@tabler/icons";
import StyledWrapper from "./StyledWrapper";

const WorkspaceItem = ({workspace}) => {
  const [openEditModal, setOpenEditModal] = useState(false);
  const [openDeleteModal, setOpenDeleteModal] = useState(false);

  return (
    <StyledWrapper>
      <div className="flex justify-between items-baseline mb-2" key={workspace.uid} >
        <li>{workspace.name}</li>
        <div className="flex gap-x-4" >
          <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)}/>
          <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenDeleteModal(true)}/>
        </div>
      {openEditModal && <EditModal onClose={() => setOpenEditModal(false)} workspace={workspace} />}
      {openDeleteModal && <DeleteModal onClose={() => setOpenDeleteModal(false)} workspace={workspace} />}
      </div>
    </StyledWrapper>
  )

}

export default WorkspaceItem;