/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import { motion, AnimatePresence } from "framer-motion";
import { cn } from "../utils";
import type { TTabNavigationItemProps } from "./tab-navigation-types";

export function TabNavigationItem({ children, isActive, className }: TTabNavigationItemProps) {
  return (
    <div
      className={cn(
        "relative z-10 flex items-center gap-2 rounded-md px-2 py-1.5 text-13 font-medium transition-colors",
        isActive ? "text-primary" : "text-secondary hover:bg-layer-transparent-hover hover:text-primary",
        className
      )}
    >
      <AnimatePresence>
        {isActive && (
          <motion.div
            className="absolute inset-0 -z-10 rounded-md bg-layer-transparent-active"
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.9 }}
            transition={{
              duration: 0.3,
              ease: [0.4, 0, 0.2, 1],
            }}
          />
        )}
      </AnimatePresence>
      {children}
    </div>
  );
}

TabNavigationItem.displayName = "TabNavigationItem";