frontend/src/components/common/Tabs.tsx

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

interface TabsProps {
  tabs: Array<{
    label: string;
    value: string;
    icon?: React.ReactNode;
  }>;
  value: string;
  onChange: (value: string) => void;
  className?: string;
}

const Tabs: React.FC<TabsProps> = ({ tabs, value, onChange, className }) => {
  return (
    <div className={cn('flex gap-1 p-1 bg-slate-800 rounded-lg w-fit', className)}>
      {tabs.map((tab) => (
        <motion.button
          key={tab.value}
          onClick={() => onChange(tab.value)}
          className={cn(
            'px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 flex items-center gap-2',
            value === tab.value
              ? 'text-white'
              : 'text-slate-400 hover:text-slate-200'
          )}
          whileHover={{ y: -1 }}
          whileTap={{ scale: 0.98 }}
        >
          {tab.icon && <span>{tab.icon}</span>}
          {tab.label}
          {value === tab.value && (
            <motion.div
              layoutId="activeTab"
              className="absolute inset-0 bg-gradient-emerald rounded-md -z-10"
              transition={{ type: 'spring', stiffness: 500, damping: 30 }}
            />
          )}
        </motion.button>
      ))}
    </div>
  );
};

export default Tabs;