Reise-Suchleiste

import { useState } from "react";
import { motion } from "framer-motion";
import { CalendarDays, MapPin, Search, Users } from "lucide-react";

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

const items = [
  { Icon: MapPin, label: "Wohin", hint: "Reiseziele suchen" },
  { Icon: CalendarDays, label: "Daten", hint: "Daten hinzufügen" },
  { Icon: Users, label: "Gäste", hint: "Gäste hinzufügen" },
] as const;

interface TravelSearchProps {
  color?: string;
  onSearch?: () => void;
}

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

  return (
    <motion.div
      layout
      transition={spring}
      className="flex w-full max-w-[440px] flex-wrap items-center rounded-[28px] bg-white p-1.5 text-[#1d1d1f] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)] dark:bg-[#1c1c1e] dark:text-[#f5f5f7]"
    >
      {items.map(({ Icon, label, hint }, i) => (
        <motion.button
          layout
          key={label}
          type="button"
          aria-pressed={active === i}
          onClick={() => setActive(i)}
          className={`flex min-w-28 flex-1 items-center gap-2 rounded-full px-4 py-3 text-left ${
            active === i
              ? "bg-[#f5f5f7] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)] dark:bg-black"
              : ""
          }`}
        >
          <Icon className="h-4 w-4" />
          <span>
            <b className="block text-xs font-medium">{label}</b>
            <small className="block text-[11px] text-[#86868b]">{hint}</small>
          </span>
        </motion.button>
      ))}
      <button
        type="button"
        aria-label="Suchen"
        onClick={onSearch}
        className="grid h-11 w-11 place-items-center rounded-full text-white"
        style={{ backgroundColor: color }}
      >
        <Search className="h-4 w-4" />
      </button>
    </motion.div>
  );
}