"use client";

import { motion } from "framer-motion";
import { useAppReducedMotion as useReducedMotion } from "@/lib/motion-pref";

import { springSnappy } from "@/lib/motion";
import { cn } from "@/lib/utils";

/**
 * The gliding highlight shared by segmented controls and pickers. One
 * `layoutId` per control makes the pill slide between its items; under
 * reduced motion it simply appears in place.
 */
export function SegmentedPill({
  layoutId,
  className,
  plain,
}: {
  layoutId: string;
  className?: string;
  /** Skip the ice gradient (for pickers that keep their own selected look). */
  plain?: boolean;
}) {
  const reduceMotion = useReducedMotion();
  const base = plain ? "slide-pill" : "slide-pill grad-ice shadow-[0_6px_16px_-8px_rgb(56_189_248/0.7)]";
  if (reduceMotion) {
    return <span aria-hidden className={cn(base, className)} />;
  }
  return (
    <motion.span
      aria-hidden
      layoutId={layoutId}
      transition={springSnappy}
      className={cn(base, className)}
    />
  );
}