Footer

"use client";
import { GitBranch, Send, Mail } from "lucide-react";

type State = "default" | "minimal" | "rich";

export function Footer({ state = "default" }: { state?: State }) {
if (state === "minimal") {
  return (
    <div className="w-full rounded-lg border border-border bg-background/30 px-5 py-4">
      <div className="flex items-center justify-between">
        <p className="font-mono text-[11px] text-muted-foreground">© 2026 Frontend Lab</p>
        <div className="flex gap-3 text-muted-foreground">
          <GitBranch className="h-3.5 w-3.5" />
          <Send className="h-3.5 w-3.5" />
        </div>
      </div>
    </div>
  );
}

const cols = [
  { title: "產品", items: ["效果", "模式", "下載", "更新日誌"] },
  { title: "資源", items: ["文件", "範例", "教學", "FAQ"] },
  { title: "關於", items: ["團隊", "部落格", "聯絡", "授權"] },
];

if (state === "rich") {
  return (
    <div className="w-full rounded-xl border border-border bg-background/30 p-6">
      <div className="grid grid-cols-4 gap-6">
        <div>
          <p className="font-mono text-sm font-medium">/ frontend lab</p>
          <p className="mt-2 text-[11px] text-muted-foreground">前端的所有片段,一站可查。</p>
          <form className="mt-3 flex gap-1">
            <input
              className="w-full rounded-md border border-border bg-background px-2 py-1 text-[11px] outline-none"
              placeholder="你的 email"
            />
            <button className="rounded-md bg-foreground px-2 py-1 text-[11px] text-background">
              訂閱
            </button>
          </form>
        </div>
        {cols.map((c) => (
          <div key={c.title}>
            <p className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">{c.title}</p>
            <ul className="mt-2 space-y-1">
              {c.items.map((it) => (
                <li key={it} className="text-[11px] text-foreground hover:text-lab-accent">{it}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="mt-6 flex items-center justify-between border-t border-border pt-4">
        <p className="font-mono text-[10px] text-muted-foreground">© 2026 Frontend Lab</p>
        <div className="flex gap-3 text-muted-foreground">
          <GitBranch className="h-3.5 w-3.5" />
          <Send className="h-3.5 w-3.5" />
          <Mail className="h-3.5 w-3.5" />
        </div>
      </div>
    </div>
  );
}

return (
  <div className="w-full rounded-xl border border-border bg-background/30 p-5">
    <div className="grid grid-cols-4 gap-4">
      <div className="col-span-1">
        <p className="font-mono text-sm font-medium">/ lab</p>
      </div>
      {cols.map((c) => (
        <div key={c.title}>
          <p className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground">{c.title}</p>
          <ul className="mt-2 space-y-1">
            {c.items.slice(0, 3).map((it) => (
              <li key={it} className="text-[11px] text-foreground hover:text-lab-accent">{it}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
    <p className="mt-5 border-t border-border pt-3 font-mono text-[10px] text-muted-foreground">
      © 2026 Frontend Lab · Made with Next.js
    </p>
  </div>
);
}