"use client";

import { Input as BaseInput } from "@base-ui/react/input";
import { m } from "motion/react";
import { MagnifyingGlass } from "@phosphor-icons/react";
import { useState } from "react";

export default function NeumorphInput() {
  const [isFocused, setIsFocused] = useState(false);

  return (
    <div className="flex items-center justify-center">
      <m.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
        className="relative flex items-center rounded-full px-4 py-3 w-75 bg-[#1e1e1e] border border-zinc-800/50"
        style={{
          boxShadow: isFocused
            ? "inset 4px 4px 8px #0a0a0a, inset -4px -4px 8px #2a2a2a, 0 0 0 2px rgba(161, 161, 170, 0.15)"
            : "inset 4px 4px 8px #0a0a0a, inset -4px -4px 8px #2a2a2a, 0 4px 12px rgba(0, 0, 0, 0.3)",
          transition: "box-shadow 0.25s ease",
        }}
      >
        <m.div
          animate={{ scale: isFocused ? 1.15 : 1, opacity: isFocused ? 1 : 0.5 }}
          transition={{ duration: 0.2, ease: "easeOut" }}
        >
          <MagnifyingGlass className="w-4 h-4 text-zinc-400 mr-3 shrink-0" />
        </m.div>
        <BaseInput
          type="text"
          placeholder="Search..."
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          className="w-full bg-transparent text-zinc-100 placeholder-zinc-500 outline-none text-sm font-medium"
        />
      </m.div>
    </div>
  );
}
Neumorph Input
