Tabs

"use client";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";

type State = "first" | "second" | "third";
const TABS = ["概覽", "設定", "整合"];

export function Tabs({ state = "first" }: { state?: State }) {
const idx = state === "first" ? 0 : state === "second" ? 1 : 2;
const [active, setActive] = useState(idx);
useEffect(() => setActive(idx), [idx]);

return (
  <div className="w-full max-w-md">
    <div className="flex gap-1 border-b border-border">
      {TABS.map((t, i) => (
        <button
          key={t}
          onClick={() => setActive(i)}
          className="relative px-4 py-2 text-sm transition"
        >
          <span className={i === active ? "text-foreground" : "text-muted-foreground"}>{t}</span>
          {i === active && (
            <motion.div
              layoutId="tab-indicator"
              className="absolute inset-x-0 -bottom-px h-0.5 bg-lab-accent"
              transition={{ type: "spring", stiffness: 400, damping: 30 }}
            />
          )}
        </button>
      ))}
    </div>
    <div
      className="mt-5 rounded-md border border-border bg-background/30 p-4 text-sm text-muted-foreground"
      style={{ fontFamily: "var(--font-zh)" }}
    >
      當前面板：<span className="text-foreground">{TABS[active]}</span> 的內容
    </div>
  </div>
);
}