import Link from "next/link";
import { LogIn } from "lucide-react";

/** 站点开启「登录才可见评论」时，游客看到的评论区占位 */
export default function CommentsLoginRequired({ redirect }: { redirect: string }) {
  const href = `/login?redirect=${encodeURIComponent(redirect)}`;
  return (
    <section className="panel p-6 sm:p-8 mt-6 text-center" aria-label="评论">
      <span
        className="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-xl"
        style={{
          background: "color-mix(in srgb, var(--accent) 16%, transparent)",
          color: "var(--accent)",
        }}
        aria-hidden
      >
        <LogIn size={22} />
      </span>
      <p className="text-[15px] font-semibold" style={{ color: "var(--ink)" }}>
        登录后查看评论
      </p>
      <p className="meta mt-1.5 text-[12.5px] leading-relaxed">
        本站评论仅对登录用户开放。
      </p>
      <Link href={href} className="btn btn-primary btn-sm mt-5 inline-flex">
        去登录
      </Link>
    </section>
  );
}