"use client";

import { motion } from "framer-motion";
import { Home, Cpu, CheckSquare, Settings } from "lucide-react";

interface Props {
  active: string;
  onChange: (tab: string) => void;
}

const TABS = [
  { id: "home", label: "Главная", icon: Home, color: "#6366f1" },
  { id: "devices", label: "Устройства", icon: Cpu, color: "#3b82f6" },
  { id: "tasks", label: "Задачи", icon: CheckSquare, color: "#8b5cf6" },
  { id: "settings", label: "Настройки", icon: Settings, color: "#10b981" },
];

export default function BottomNav({ active, onChange }: Props) {
  return (
    <motion.div
      className="glass-card px-3 py-2 flex items-center justify-around no-select"
      style={{ borderRadius: "20px" }}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      {TABS.map((tab) => {
        const Icon = tab.icon;
        const isActive = active === tab.id;
        return (
          <motion.button
            key={tab.id}
            onClick={() => onChange(tab.id)}
            className="flex flex-col items-center gap-1.5 px-8 py-2 rounded-2xl relative"
            whileTap={{ scale: 0.85 }}
          >
            {isActive && (
              <motion.div
                className="absolute inset-0 rounded-2xl"
                style={{
                  background: `${tab.color}15`,
                  border: `1px solid ${tab.color}30`,
                  boxShadow: `0 0 16px ${tab.color}20`,
                }}
                layoutId="navActive"
                transition={{ type: "spring", stiffness: 450, damping: 30 }}
              />
            )}
            <Icon
              size={22}
              color={isActive ? tab.color : "var(--text-secondary)"}
              strokeWidth={isActive ? 2 : 1.5}
            />
            <span
              className="text-xs font-semibold"
              style={{ color: isActive ? tab.color : "var(--text-secondary)" }}
            >
              {tab.label}
            </span>
          </motion.button>
        );
      })}
    </motion.div>
  );
}