'use client';

import { usePathname, useRouter } from 'next/navigation';
import { IconType } from 'react-icons';

type ViewItem = {
  label: string;
  icon: IconType;
  path: string;
};

type ViewToggleProps = {
  views: ViewItem[];
  className?: string;
};

export default function ViewToggle({ views, className = '' }: ViewToggleProps) {
  const router = useRouter();
  const pathname = usePathname();

    const isActive = (path: string) => {
    if (path === '/manage_lead') {
        return pathname === path;
    }
    return pathname.startsWith(path);
    };

  return (
    <div className={`flex items-center gap-1 border rounded-lg p-1 bg-gray-100 ${className}`}>
      {views.map((v) => {
        const Icon = v.icon;
        const active = isActive(v.path);

        return (
          <button
            key={v.path}
            onClick={() => router.push(v.path)}
            className={`flex items-center gap-2 px-3 py-1 rounded-md text-sm transition ${
              active ? 'bg-white shadow font-semibold' : 'text-gray-600'
            }`}
          >
            <Icon className="text-base" />
            {v.label}
          </button>
        );
      })}
    </div>
  );
}