import React, { useState, useEffect } from "react";
import { twMerge } from 'tailwind-merge'

import { BiSolidBadge } from "react-icons/bi";
import { BiSolidBadgeCheck } from "react-icons/bi";

interface FeaturedButtonProps {
  className?: string;
  text?: string;
  checked: boolean;
  setChecked: React.Dispatch<React.SetStateAction<boolean>>;
}

const FeaturedButton: React.FC<FeaturedButtonProps> = ({ className='', text='', checked, setChecked }) => {
  const handleClick = () => {
    setChecked((prev) => !prev); // Use functional update for state
  };

  return (
    <button
      onClick={handleClick}
      className={twMerge("group p-[.4rem] bg-zinc-600 bg-opacity-[.07] border text-zinc-800 border-zinc-100 rounded", className)}
      aria-label={checked ? "Unmark as featured" : "Mark as featured"}
    >
      <div className="flex gap-1">
      <input type="checkbox" className="cursor-pointer" checked={checked} onChange={()=>{}} />
      {text}
      </div>
    </button>
  );
};

export default FeaturedButton