/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import type { ReactNode } from "react";
import { CloseIcon } from "@plane/propel/icons";

type TInboxAppliedFilterChipValue = {
  key: string;
  label: string;
  icon?: ReactNode;
  onRemove?: () => void;
};

type TInboxAppliedFilterChipProps = {
  title: string;
  values: TInboxAppliedFilterChipValue[];
  onClear?: () => void;
};

export const InboxAppliedFilterChip = (props: TInboxAppliedFilterChipProps) => {
  const { title, values, onClear } = props;

  if (values.length === 0) return null;

  return (
    <div className="nodedc-filter-chip flex flex-wrap items-center gap-2 px-3 py-2 text-11">
      <span className="text-11 font-medium text-secondary">{title}</span>
      {values.map((value) => (
        <div key={value.key} className="inline-flex items-center gap-1.5 rounded-full bg-white/6 px-2.5 py-1 text-11 text-primary">
          {value.icon ? <span className="flex shrink-0 items-center justify-center">{value.icon}</span> : null}
          <span className="truncate">{value.label}</span>
          {value.onRemove ? (
            <button
              type="button"
              className="grid h-3.5 w-3.5 shrink-0 place-items-center text-tertiary transition-colors hover:text-primary"
              onClick={value.onRemove}
              aria-label={`Remove ${value.label}`}
            >
              <CloseIcon className="h-3 w-3" />
            </button>
          ) : null}
        </div>
      ))}
      {onClear ? (
        <button
          type="button"
          className="grid h-5 w-5 shrink-0 place-items-center rounded-full bg-white/6 text-tertiary transition-colors hover:text-primary"
          onClick={onClear}
          aria-label={`Clear ${title}`}
        >
          <CloseIcon className="h-3 w-3" />
        </button>
      ) : null}
    </div>
  );
};
