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

import React from "react";
import { observer } from "mobx-react";
// pi dash imports
import { CloseIcon } from "@pi-dash/propel/icons";
import type { IFilterInstance } from "@pi-dash/shared-state";
import type { TExternalFilter, TFilterProperty } from "@pi-dash/types";

interface FilterItemCloseButtonProps<P extends TFilterProperty, E extends TExternalFilter> {
  conditionId: string;
  filter: IFilterInstance<P, E>;
}

export const FilterItemCloseButton = observer(function FilterItemCloseButton<
  P extends TFilterProperty,
  E extends TExternalFilter,
>(props: FilterItemCloseButtonProps<P, E>) {
  const { conditionId, filter } = props;

  const handleRemoveFilter = () => {
    filter.removeCondition(conditionId);
  };

  return (
    <button
      onClick={handleRemoveFilter}
      className="bg-layer-transparent px-1.5 text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary focus:outline-none"
      type="button"
      aria-label="Remove filter"
    >
      <CloseIcon className="size-3.5" />
    </button>
  );
});
