import React from 'react';
import { Sparkles, LayoutGrid, Clock, Settings, Zap } from 'lucide-react';
import { cn } from '@/lib/utils';
import { motion } from 'framer-motion';

interface BottomNavProps {
    currentTab?: 'create' | 'library' | 'uploads' | 'settings';
    onTabChange?: (tab: 'create' | 'library' | 'uploads' | 'settings') => void;
}

export function BottomNav({ currentTab = 'create', onTabChange }: BottomNavProps) {
    return (
        <nav className="fixed bottom-0 left-0 right-0 glass-panel border-t border-border px-8 py-3 pb-8 z-[100] shadow-premium">
            <div className="flex justify-between items-center max-w-lg mx-auto">

                {/* Create Tab (Highlighted) */}
                <button
                    onClick={() => onTabChange?.('create')}
                    className="flex flex-col items-center space-y-1 relative group"
                >
                    <div className="relative">
                        <div className={cn(
                            "w-12 h-10 rounded-2xl flex items-center justify-center transition-all duration-300",
                            currentTab === 'create'
                                ? "bg-primary shadow-lg shadow-primary/30"
                                : "bg-muted/50 hover:bg-muted"
                        )}>
                            <Sparkles className={cn(
                                "h-5 w-5 transition-colors",
                                currentTab === 'create' ? "text-white" : "text-muted-foreground"
                            )} />
                            {currentTab === 'create' && (
                                <motion.div
                                    layoutId="nav-glow"
                                    className="absolute inset-0 bg-primary/20 blur-lg -z-10 rounded-full"
                                />
                            )}
                        </div>
                    </div>
                    <span className={cn(
                        "text-[10px] font-bold tracking-tight transition-colors",
                        currentTab === 'create' ? "text-primary" : "text-muted-foreground"
                    )}>Create</span>
                </button>

                {/* Prompt Library */}
                <button
                    onClick={() => onTabChange?.('library')}
                    className={cn(
                        "flex flex-col items-center space-y-1 transition-all group",
                        currentTab === 'library' ? "text-primary" : "text-muted-foreground"
                    )}
                >
                    <div className={cn(
                        "p-2 rounded-xl transition-all",
                        currentTab === 'library' ? "bg-primary/10" : "group-hover:bg-muted/50"
                    )}>
                        <LayoutGrid className={cn("h-6 w-6", currentTab === 'library' ? "text-primary" : "")} />
                    </div>
                    <span className={cn("text-[10px] font-semibold", currentTab === 'library' ? "text-primary" : "")}>Library</span>
                </button>

                {/* Uploads */}
                <button
                    onClick={() => onTabChange?.('uploads')}
                    className={cn(
                        "flex flex-col items-center space-y-1 transition-all group",
                        currentTab === 'uploads' ? "text-primaryScale-500" : "text-muted-foreground"
                    )}
                >
                    <div className={cn(
                        "p-2 rounded-xl transition-all",
                        currentTab === 'uploads' ? "bg-primary/10" : "group-hover:bg-muted/50"
                    )}>
                        <Clock className={cn("h-6 w-6", currentTab === 'uploads' ? "text-primary" : "")} />
                    </div>
                    <span className={cn("text-[10px] font-semibold", currentTab === 'uploads' ? "text-primary" : "")}>Uploads</span>
                </button>

                {/* Settings */}
                <button
                    onClick={() => onTabChange?.('settings')}
                    className={cn(
                        "flex flex-col items-center space-y-1 transition-all group",
                        currentTab === 'settings' ? "text-primaryScale-500" : "text-muted-foreground"
                    )}
                >
                    <div className={cn(
                        "p-2 rounded-xl transition-all",
                        currentTab === 'settings' ? "bg-primary/10" : "group-hover:bg-muted/50"
                    )}>
                        <Settings className={cn("h-6 w-6", currentTab === 'settings' ? "text-primary" : "")} />
                    </div>
                    <span className={cn("text-[10px] font-semibold", currentTab === 'settings' ? "text-primary" : "")}>Settings</span>
                </button>

            </div>
        </nav>
    );
}