import { Link, useLocation } from 'react-router-dom';

const RecipeBookTabs = () => {
  const location = useLocation();

  const tabs = [
    { id: '/', label: 'All Recipes', icon: '📚' },
    { id: '/recipe/', label: 'Recipe', icon: '🥗' },
    { id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
    { id: '/about', label: 'About', icon: '🍽️' },
  ];

  return (
    <div className="bg-gradient-to-b from-amber-50 to-orange-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
      {/* Navigation Tabs */}
      <div className="relative h-full">
        {/* Tab Background Line */}
        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>

        {/* Tabs Container */}
        <div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
          {tabs.map((tab) => {
            const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");

            return (
              <Link
                key={tab.id}
                to={tab.id}
                className={`
                  relative px-6 py-3 rounded-t-lg font-medium text-sm transform
                  ${isActive
                    ? 'bg-amber-100 text-amber-800 scale-105 z-10 border-t-2 border-amber-200'
                    : 'bg-amber-200 text-amber-600 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
                  }
                  before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 
                  ${isActive ? '' : ''}
                `}
              >
                <div className="flex items-center space-x-2">
                  <span className="text-lg">{tab.icon}</span>
                  <span>{tab.label}</span>
                </div>

                {/* Tab Shadow Effect */}
                {isActive && (
                  <>
                    <div className="absolute -left-2 bottom-0 w-2 h-2 bg-white">
                      <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
                    </div>
                    <div className="absolute -right-2 bottom-0 w-2 h-2 bg-white">
                      <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
                    </div>
                  </>
                )}
              </Link>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default RecipeBookTabs;