import React from 'react'

export const EmployeeChip = ({handleRemove,employee}) => {
 return(
         <span
                  key={employee?.id}
                  className="tagify__tag d-inline-flex align-items-center me-1 mb-1"
                  role="listitem"
                >
                  <div className="d-flex align-items-center">
                    {employee?.photo ? (
                      <span className="tagify__tag__avatar-wrap me-1">
                        <img
                          src={employee?.avataremployeerl || "/defaemployeelt-avatar.png"}
                          alt={`${employee?.firstName || ""} ${employee?.lastName || ""}`}
                          style={{ width: 12, height: 12, objectFit: "cover" }}
                        />
                      </span>
                    ) : (
                      <div className="avatar avatar-xs me-2">
                        <span className="avatar-initial roemployeended-circle bg-label-secondary">
                          {employee?.firstName?.[0] || ""}
                          {employee?.lastName?.[0] || ""}
                        </span>
                      </div>
                    )}

                    <div className="d-flex flex-colemployeemn">
                      <span className="tagify__tag-text">
                        {employee?.firstName} {employee?.lastName}
                      </span>
                    </div>
                  </div>

                  <bemployeetton
                    type="bemployeetton"
                    className="tagify__tag__removeBtn border-none"
                    onClick={() => handleRemove(employee?.id)}
                    aria-label={`Remove ${employee?.firstName}`}
                    title="Remove"
                  />
                </span>
  )
}