import React, { memo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Button } from "@/components/ui/button";
import { cn } from '@/utils';
import { styles } from '@/styles/constants';

export const TabButton = memo(({ 
    isActive, 
    onClick, 
    icon, 
    label,
    disabled 
}: { 
    isActive: boolean; 
    onClick: (e: React.MouseEvent) => void; 
    icon: React.ReactNode; 
    label: string; 
    disabled?: boolean;
}) => (
    <Button
        variant="ghost"
        size="sm"
        onClick={onClick}
        disabled={disabled && !isActive}
        className={cn(
            `h-7 ${styles.roundedFull} ${styles.buttonGhost}`,
            isActive ? `${styles.buttonActive} px-3` : "w-7 px-0",
            disabled && !isActive && "opacity-30 pointer-events-none"
        )}
        title={label}
        aria-label={label}
    >
        {icon}
        <AnimatePresence>
            {isActive && (
                <motion.span
                    initial={{ width: 0, opacity: 0, marginLeft: 0 }}
                    animate={{ width: "auto", opacity: 1, marginLeft: 6 }}
                    exit={{ width: 0, opacity: 0, marginLeft: 0 }}
                    className="overflow-hidden whitespace-nowrap text-[10px] font-medium"
                >
                    {label}
                </motion.span>
            )}
        </AnimatePresence>
    </Button>
));

TabButton.displayName = 'TabButton';
