// components/CalculatorNav.tsx
// Навигация между калькуляторами

'use client';

import { usePathname, useSearchParams } from 'next/navigation';

export default function CalculatorNav() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const chatId = searchParams.get('chat_id');
  
  // Сохраняем chat_id при переходах
  const queryString = chatId ? `?chat_id=${chatId}` : '';
  
  const calculators = [
    { id: 'soap', name: 'Мыло' },
    { id: 'candle', name: 'Свеча' },
  ];

  const handleCalculatorChange = (calcId: string) => {
    window.location.href = `/${calcId}${queryString}`;
  };

  return (
    <div className="mb-6 bg-gray-700 rounded-lg p-4">
      <h2 className="text-lg font-semibold text-gray-200 mb-3">
        Выберите калькулятор:
      </h2>
      <div className="grid grid-cols-2 gap-2">
        {calculators.map((calc) => {
          const isActive = pathname === `/${calc.id}`;
          
          return (
            <button
              key={calc.id}
              onClick={() => handleCalculatorChange(calc.id)}
              className={`
                px-4 py-2 rounded-md text-center font-medium transition-colors
                ${isActive
                  ? 'bg-sky-500 text-gray-100'
                  : 'bg-gray-600 text-gray-200 hover:bg-gray-500 active:bg-gray-400'
                }
              `}
            >
              {calc.name}
            </button>
          );
        })}
      </div>
    </div>
  );
}