src/components/layout/tab-navigation.tsx

'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';
import { useActiveTab, useAppStore } from '@/store/app-store';

const tabs = [
  { id: 'analyze' as const, label: 'Analyze Note', icon: '📝' },
  { id: 'settings' as const, label: 'Settings', icon: '⚙️' },
];

export function TabNavigation() {
  const activeTab = useActiveTab();
  const setActiveTab = useAppStore((state) => state.setActiveTab);

  return (
    <nav className="flex items-center gap-1 p-1 glass rounded-2xl">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          onClick={() => setActiveTab(tab.id)}
          className={cn(
            'relative flex items-center gap-2 px-4 py-2 rounded-xl',
            'text-sm font-medium',
            'transition-colors duration-200',
            activeTab === tab.id
              ? 'text-[var(--foreground)]'
              : 'text-[var(--foreground)]/60 hover:text-[var(--foreground)]/80'
          )}
        >
          {activeTab === tab.id && (
            <motion.div
              layoutId="activeTab"
              className="absolute inset-0 glass-elevated rounded-xl"
              transition={{
                type: 'spring',
                stiffness: 500,
                damping: 35,
              }}
            />
          )}
          <span className="relative z-10">{tab.icon}</span>
          <span className="relative z-10 hidden sm:inline">{tab.label}</span>
        </button>
      ))}
    </nav>
  );
}

// Mobile bottom tab bar
export function MobileTabBar() {
  const activeTab = useActiveTab();
  const setActiveTab = useAppStore((state) => state.setActiveTab);

  return (
    <nav
      className={cn(
        'fixed bottom-0 left-0 right-0 z-50',
        'glass-elevated',
        'border-t border-[var(--glass-border-subtle)]',
        'md:hidden',
        'pb-[env(safe-area-inset-bottom)]'
      )}
    >
      <div className="flex items-center justify-around h-16">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={cn(
              'relative flex flex-col items-center gap-1 px-6 py-2',
              'text-xs font-medium',
              'transition-colors duration-200',
              activeTab === tab.id
                ? 'text-[var(--suggestion-accent)]'
                : 'text-[var(--foreground)]/60'
            )}
          >
            <span className="text-xl">{tab.icon}</span>
            <span>{tab.label.split(' ')[0]}</span>
            {activeTab === tab.id && (
              <motion.div
                layoutId="mobileActiveTab"
                className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-8 h-1 rounded-full bg-[var(--suggestion-accent)]"
                transition={{
                  type: 'spring',
                  stiffness: 500,
                  damping: 35,
                }}
              />
            )}
          </button>
        ))}
      </div>
    </nav>
  );
}