Barra de pestañas inferior

import { useState } from "react";
import { motion } from "framer-motion";
import { Heart, Home, Search, User } from "lucide-react";

const spring = { type: "spring" as const, stiffness: 300, damping: 30 };

const ITEMS = [
  { icon: Home, label: "Inicio" },
  { icon: Search, label: "Buscar" },
  { icon: Heart, label: "Favoritos" },
  { icon: User, label: "Perfil" },
];

interface TabBarProps {
  color?: string;
}

export default function TabBar({ color = "#0071e3" }: TabBarProps) {
  const [active, setActive] = useState(0);

  return (
    <div className="flex rounded-[24px] bg-white/70 dark:bg-black/70 p-2 text-[#1d1d1f] dark:text-[#f5f5f7] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)] backdrop-blur-[20px]">
      {ITEMS.map(({ icon: Icon, label }, i) => (
        <button
          key={label}
          type="button"
          aria-pressed={active === i}
          onClick={() => setActive(i)}
          className="relative flex w-16 flex-col items-center gap-1 py-1 text-[10px]"
        >
          <motion.span
            animate={{ y: active === i ? -3 : 0, scale: active === i ? 1.12 : 1 }}
            transition={spring}
          >
            <Icon className="h-5 w-5" style={{ color: active === i ? color : undefined }} />
          </motion.span>
          {label}
          {active === i && (
            <motion.i
              layoutId="tab-dot"
              className="absolute -bottom-0.5 h-1 w-1 rounded-full"
              style={{ backgroundColor: color }}
            />
          )}
        </button>
      ))}
    </div>
  );
}