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

const SegmentedControl = ({ segments, active, onChange }) => {
  return (
    <div className="inline-flex bg-gray-100 dark:bg-gray-800 p-1 rounded-xl">
      {segments.map((segment) => (
        <button
          key={segment.id}
          onClick={() => onChange(segment.id)}
          className={cn(
            "relative px-4 py-2 text-sm font-medium rounded-lg transition-colors",
            active === segment.id
              ? "text-white"
              : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
          )}
        >
          {active === segment.id && (
            <motion.div
              layoutId="activeSegment"
              // className="absolute inset-0 bg-[#941403] rounded-lg"
              className="absolute inset-0 bg-[#007E45] rounded-lg"
              transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
            />
          )}
          <span className="relative z-10">{segment.label}</span>
        </button>
      ))}
    </div>
  );
};

export default SegmentedControl;
