import { OctagonMinus } from "lucide-react";

interface subcategorycardType {
  subcategory: string;
  remove: () => void;
}

export default function SubcategoryCard({
  subcategory,
  remove,
}: subcategorycardType) {
  return (
    <div className="flex flex-wrap gap-x-3 w-full my-4 gap-y-2">
      <div className="flex gap-x-1 items-center">
        <div className="px-4 max-w-30 max-h-10 text-[10px] py-2 rounded-full bg-[#00000080] text-white">
          {subcategory}
        </div>
        <span
          role="button"
          className="p-1 hover:bg-transparent cursor-pointer"
          onClick={remove}
        >
          <OctagonMinus className="text-white" fill="#EF2424" />
        </span>
      </div>
    </div>
  );
}
