import React from 'react';
import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

const Tabs = ({ tabs, active, onChange }) => {
  return (
    <div className="border-b border-[#F2F2F2] dark:border-gray-800">
      <div className="flex gap-6">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => onChange(tab.id)}
            className={cn(
              "relative pb-3 text-sm font-bold transition-colors",
              active === tab.id
                ? "text-[#007E45]"
                : "text-[#6A6A6A] dark:text-gray-400 hover:text-black dark:hover:text-white"
            )}
          >
            {tab.label}
            {tab.count !== undefined && (
              <span className={cn(
                  "ml-2 inline-flex items-center justify-center h-5 w-5 rounded-full text-xs font-medium",
                  active === tab.id ? "bg-[#007E45] text-white" : "bg-[#F2F2F2] text-[#6A6A6A]"
              )}>
                {tab.count}
              </span>
            )}
            {active === tab.id && (
              <motion.div
                layoutId="activeTab"
                className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#007E45]"
                transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
              />
            )}
          </button>
        ))}
      </div>
    </div>
  );
};

export default Tabs;