import { __, sprintf } from "@wordpress/i18n";
import { X } from "lucide-react";

/** A picked item with a remove button. */
const Chip = ({ label, disabled, onRemove }) => (
  <span className="ino:inline-flex ino:h-[30px] ino:items-center ino:gap-1 ino:rounded-full ino:border ino:border-border ino:bg-muted ino:pr-1 ino:pl-3 ino:text-[13px]">
    {label}
    <button
      type="button"
      disabled={disabled}
      onClick={onRemove}
      aria-label={sprintf(
        /* translators: %s: category, role or product name. */
        __("Remove %s", "product-comparison-for-woocommerce"),
        label,
      )}
      className="ino:inline-flex ino:size-[22px] ino:cursor-pointer ino:items-center ino:justify-center ino:rounded-full ino:border-0 ino:bg-transparent ino:text-muted-foreground ino:hover:bg-background ino:hover:text-foreground ino:focus-visible:outline-2 ino:focus-visible:outline-ring ino:disabled:cursor-not-allowed"
    >
      <X className="ino:size-3.5" aria-hidden="true" />
    </button>
  </span>
);

export default Chip;