type Props = {
  id?: number;
  activeId?: number;
  setActiveId?: (id: number) => void;
  classNameWrapper?: string;
  classNameChild?: string;
  title: string;
};

const Tag = ({
  id,
  activeId,
  setActiveId,
  classNameWrapper,
  classNameChild,
  title,
}: Props) => {
   return (
    <div
      onClick={() => {
         setActiveId?.(id || 0);
      }}
      className={`${
        id === activeId ? "!bg-[#5A081626] !text-primary" : "text-dark"
      } flex justify-center cursor-pointer md:justify-center bg-second  px-[32px] py-[10px] rounded-[8px] !h-auto text-center  ${classNameWrapper}`}
    
    >
      <span
        className={`  text-[15px] sm:text-[10px] md:text-[15px]  lg:text-[18px] font-light ${classNameChild}`}
      >
        {title}
      </span>
    </div>
  );
};

export default Tag;