import React from "react";
import { Home, Coffee, Plus, Bookmark, User } from "lucide-react";

export default function BottomNav({ view, setView, setSelectedBean, onCreatePress }) {
  const items = [
    { id: "dashboard", label: "Home", Icon: Home },
    { id: "beans", label: "Recipes", Icon: Coffee },
    { id: "create", label: "Create", Icon: Plus, isAction: true },
    { id: "brews", label: "Logs", Icon: Bookmark },
    { id: "profile", label: "Profile", Icon: User },
  ];

  return (
    <div className="fixed bottom-5 left-1/2 -translate-x-1/2 w-[calc(100%-32px)] max-w-[448px] z-[60]">
      <div className="bg-[#2C1810] border border-[#2C1810] rounded-full shadow-[0_12px_32px_rgba(44,24,16,0.25),0_4px_12px_rgba(44,24,16,0.15)] flex items-center px-3 py-2">
        {items.map(item => {
          const isActive = view === item.id;
          const { Icon } = item;
          
          if (item.isAction) {
            return (
              <button
                key={item.id}
                onClick={onCreatePress}
                className="flex-1 flex flex-col items-center justify-center mx-1 cursor-pointer"
                aria-label="Create new item"
              >
                <div className="w-11 h-11 rounded-full bg-[#FAF6F1] flex items-center justify-center text-[#2C1810] shadow-[0_4px_12px_rgba(0,0,0,0.2)] transition-transform active:scale-90 hover:scale-105">
                  <Icon size={20} strokeWidth={2.5} />
                </div>
              </button>
            );
          }
          
          return (
            <button
              key={item.id}
              onClick={() => { setView(item.id); setSelectedBean(null); }}
              className={`flex-1 flex flex-col items-center gap-1 py-1.5 rounded-full cursor-pointer border-none transition-all ${isActive ? "bg-white/10" : "bg-transparent"}`}
            >
              <Icon 
                size={20} 
                strokeWidth={2} 
                className={`transition-all ${isActive ? "text-white scale-105" : "text-white/60"}`} 
              />
              <span className={`text-[10px] font-semibold tracking-wide transition-colors ${isActive ? "text-white" : "text-white/60"}`}>
                {item.label}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}