import { Add } from "iconsax-react";
import { type FC } from "react";
import { useTranslation } from "react-i18next";
import AvatarImage from "../../../../assets/images/avatar_image.png";
import type { TaskLabel } from "./labels/types";
import type { TaskUser } from "./users/types";

type Props = {
  selectedLabels: TaskLabel[];
  selectedUsers: TaskUser[];
};

const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers }) => {
  const { t } = useTranslation("global");

  return (
    <div className="mt-4 grid grid-cols-2 gap-4">
      <div>
        <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.labels")}</div>
        <div className="flex items-center gap-2 flex-wrap">
          {selectedLabels.map((label) => (
            <span
              key={label.id}
              className="inline-flex items-center h-7 px-3 rounded-lg text-xs font-medium"
              style={{ backgroundColor: label.color }}
            >
              {label.title}
            </span>
          ))}
          <button
            type="button"
            className="size-7 rounded-lg border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
            aria-label={t("taskmanager.task_detail.new_label")}
          >
            <Add size={14} color="#292D32" />
          </button>
        </div>
      </div>

      <div>
        <div className="text-xs font-medium mb-2">{t("taskmanager.users")}</div>
        <div className="flex items-center gap-2 flex-wrap">
          {selectedUsers.map((user) => (
            <div key={user.id} className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden">
              <img src={user.avatar ?? AvatarImage} alt={user.name} className="size-full object-cover" />
            </div>
          ))}
          <button
            type="button"
            className="size-7 rounded-full border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
            aria-label={t("taskmanager.users")}
          >
            <Add size={14} color="#292D32" />
          </button>
        </div>
      </div>
    </div>
  );
};

export default TaskDetailMetadataPreview;