import React from "react";
import { Button } from "antd-mobile";
import { CloseCircleOutline } from "antd-mobile-icons";
import styles from "./ConditionList.module.scss";

interface FilterCondition {
  id?: string;
  type: string;
  field?: string;
  label: string;
  value: any;
  displayValue?: any;
}

interface ConditionListProps {
  conditions: FilterCondition[];
  onRemove: (condition: any) => void;
}

const ConditionList: React.FC<ConditionListProps> = ({ conditions, onRemove }) => {
  if (conditions.length === 0) return null;

  return (
    <div className={styles.container}>
      {conditions.map((condition, index) => (
        <div key={condition.id || condition.field || index} className={styles.conditionItem}>
            <div className={styles.conditionContent}>
            <span className={styles.label}>{condition.label}</span>
            <span className={styles.value}>
              {condition.displayValue || condition.value}
              </span>
            </div>
            <Button
              fill="none"
              className={styles.removeBtn}
            onClick={() => onRemove(condition)}
            >
            <CloseCircleOutline />
            </Button>
          </div>
        ))}
    </div>
  );
};

export default ConditionList;
