import React, { useState } from "react";
import { PreviewPanelContainer } from "./index.styled";
import { CloseIcon } from "../assets/svg/close";
import { assigneeList } from "../create/data";
import { CloseRedIcon } from "../assets/svg/close-red";
import SearchBar from "../../searchBar";
import useTranslation from "../../../hooks/useTranslation.jsx";
import wordStore from "../../../mc/wordStore.json";
const AssigneesPanel = ({ close }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <PreviewPanelContainer>
      <div className="asp_main_content">
        <div className="asp_header">
          <p className="asp_header_title">{findText("Assignees")}</p>

          <span className="close_icon" onClick={close}>
            <CloseIcon fill={findText("#323232")} />
          </span>
        </div>

        <div className="asp_body">
          <SearchBar
            placeholder={findText("Search here")}
            outlineColor={findText("transparent")}
            heightSize="44px"
            widthSize="100%"
            border="1px solid #ADB2B2"
            // onSubmit={setSearch}
          />

          <div className="asp_inner">
            {assigneeList?.map((item, idx) => (
              <div className="asp_list_row" key={idx}>
                <div className="asp_wrapper">
                  <div className="asp_img">
                    <img src={item?.image} alt="" />
                  </div>

                  <div>
                    <p className="asp_title">{item?.name}</p>
                    <p className="asp_stat">{item?.email}</p>
                  </div>
                </div>

                <div className="asp_assigned">
                  <p className="ass_txt"> Assigned on:</p>
                  <p className="ass_subtxt"> {item?.date} </p>
                </div>
                <span className="close_icon" onClick={close}>
                  <CloseRedIcon />
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </PreviewPanelContainer>
  );
};
export default AssigneesPanel;
