Segmented Control

"use client";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

type State = "first" | "middle" | "last";

const OPTIONS = ["日", "週", "月", "年"];

export function SegmentedControl({ state = "first" }: { state?: State }) {
const init = state === "middle" ? 1 : state === "last" ? 3 : 0;
const [active, setActive] = useState(init);
useEffect(() => setActive(init), [state]);

return (
  <div className="w-full max-w-md">
    <div className="relative flex rounded-lg bg-muted p-0.5">
      {OPTIONS.map((o, i) => (
        <button
          key={o}
          onClick={() => setActive(i)}
          className={cn(
            "relative z-10 flex-1 rounded-md py-1.5 text-xs transition-colors",
            i === active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
          )}
        >
          {i === active && (
            <motion.span
              layoutId="seg-thumb"
              className="absolute inset-0 -z-10 rounded-md bg-background shadow-sm"
              transition={{ type: "spring", stiffness: 380, damping: 32 }}
            />
          )}
          {o}
        </button>
      ))}
    </div>
    <p className="mt-3 font-mono text-[11px] text-muted-foreground">
      顯示「{OPTIONS[active]}」視圖
    </p>
  </div>
);
}