import Link from "next/link";
import { Crown, LogIn, User } from "lucide-react";
import { Button } from "@/components/ui/button";
import { logoutUserAction } from "@/lib/actions/user-auth";

export type HeaderAuthState = {
  email: string;
  name: string | null;
  isMember: boolean;
};

export function HeaderAuth({ auth }: { auth: HeaderAuthState | null }) {
  if (!auth) {
    return (
      <div className="hidden items-center gap-2 sm:flex">
        <Button
          render={<Link href="/login" />}
          nativeButton={false}
          variant="ghost"
          size="sm"
        >
          <LogIn className="size-4" />
          登入
        </Button>
        <Button
          render={<Link href="/membership" />}
          nativeButton={false}
          size="sm"
          className="bg-primary text-primary-foreground"
        >
          <Crown className="size-4" />
          會員
        </Button>
      </div>
    );
  }

  return (
    <div className="hidden items-center gap-2 sm:flex">
      {auth.isMember && (
        <span className="flex items-center gap-1 rounded-full border border-primary/40 bg-primary/10 px-2 py-0.5 text-xs text-primary">
          <Crown className="size-3" />
          會員
        </span>
      )}
      <Button
        render={<Link href="/account" />}
        nativeButton={false}
        variant="ghost"
        size="sm"
      >
        <User className="size-4" />
        {auth.name || auth.email.split("@")[0]}
      </Button>
      <form action={logoutUserAction}>
        <Button type="submit" variant="outline" size="sm">
          登出
        </Button>
      </form>
    </div>
  );
}