Untitled

import { Tag } from "antd";
import PropTypes from "prop-types";
import "../../assets/styles/ShoppingCart.scss";

const OptionCart = ({
  categories,
  selectedTags,
  onChange,
  onSave,
  onCancel,
}) => {
  return (
    <div className="size-popup">
      <div className="size-popup-content">
        <h3 style={{ textAlign: "center", marginBottom: "16px" }}>
          Update Options
        </h3>
        <div style={{ display: "block", marginBottom: "24px" }}>
          {categories.map((category) => (
            <div
              key={category.name}
              style={{
                marginBottom: "16px",
                display: "flex",
                alignItems: "center", // Căn giữa dọc
              }}
            >
              <div
                style={{
                  fontWeight: "bold",
                  fontSize: "16px",
                  marginRight: "16px", // Tạo khoảng cách giữa tên và tag
                  whiteSpace: "nowrap",
                }}
              >
                {category.name}:
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
                {category.tags.map((tag) => (
                  <Tag.CheckableTag
                    key={`${category.name}-${tag}`}
                    checked={selectedTags[category.name] === tag}
                    onChange={() => onChange(category.name, tag)}
                  >
                    {tag}
                  </Tag.CheckableTag>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="size-popup-actions">
          <button onClick={onCancel} className="cancel-button-option">
            Cancel
          </button>
          <button onClick={onSave} className="save-button-option">
            Save
          </button>
        </div>
      </div>
    </div>
  );
};

OptionCart.propTypes = {
  categories: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      tags: PropTypes.arrayOf(PropTypes.string).isRequired,
    })
  ).isRequired,
  selectedTags: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired,
  onSave: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired,
};

export default OptionCart;