import React from 'react'

export default function TabButton({ item='', selectedTab='', setSelectedTab=()=>{} }) {
  return (
    <button
      className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${
        selectedTab === item
          ? "bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold"
          : "bg-white text-[#000]"
      }`}
      value={item}
      name={item}
      onClick={() => setSelectedTab(item)}
    >
      <div
        className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${
          selectedTab === item
            ? "border-white bg-emerald-500"
            : "border-red-50 dark:border-[#D85A5A] bg-white"
        }`}
      ></div>
      {item[0].toUpperCase() + item.slice(1)}
    </button>
  )
}