Icon category bar

import { useState } from "react";
import { motion } from "framer-motion";
import { Calendar, Compass, Home, Layers } from "lucide-react";

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

const ITEMS = [
  { icon: Home, label: "Homes" },
  { icon: Compass, label: "Nature" },
  { icon: Calendar, label: "Getaways" },
  { icon: Layers, label: "Design" },
];

interface CategoryBarProps {
  color?: string;
}

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

  return (
    <div className="flex gap-7 border-b border-black/10 dark:border-white/10">
      {ITEMS.map(({ icon: Icon, label }, i) => (
        <button
          key={label}
          type="button"
          aria-pressed={active === i}
          onClick={() => setActive(i)}
          className="relative flex flex-col items-center gap-1.5 pb-3 text-xs text-[#86868b]"
        >
          <Icon className="h-5 w-5" style={{ color: active === i ? color : undefined }} />
          <span>{label}</span>
          {active === i && (
            <motion.i
              layoutId="cat-line"
              className="absolute inset-x-0 -bottom-px h-0.5"
              style={{ backgroundColor: color }}
              transition={spring}
            />
          )}
        </button>
      ))}
    </div>
  );
}