import Link from "next/link";
import { Crown, Lock } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

interface PaywallProps {
  title?: string;
  description?: string;
}

export function Paywall({
  title = "會員專屬內容",
  description = "訂閱 NightWalkAsia 會員，解鎖老司機私房攻略、進階場地情報與深度夜遊分析。",
}: PaywallProps) {
  return (
    <Card className="relative overflow-hidden border-primary/30 bg-gradient-to-br from-primary/10 via-card to-card">
      <div className="absolute -right-8 -top-8 size-32 rounded-full bg-primary/10 blur-2xl" />
      <CardContent className="relative flex flex-col items-center p-8 text-center sm:p-12">
        <div className="mb-4 flex size-14 items-center justify-center rounded-full bg-primary/20">
          <Lock className="size-7 text-primary" />
        </div>
        <div className="mb-2 flex items-center gap-2 text-sm text-primary">
          <Crown className="size-4" />
          會員專屬
        </div>
        <h3 className="text-xl font-bold sm:text-2xl">{title}</h3>
        <p className="mt-3 max-w-md text-muted-foreground">{description}</p>
        <div className="mt-8 flex flex-col gap-3 sm:flex-row">
          <Button
            render={<Link href="/membership" />}
            nativeButton={false}
            className="bg-primary text-primary-foreground"
          >
            <Crown className="size-4" />
            查看會員方案
          </Button>
          <Button
            render={<Link href="/login?next=/membership" />}
            nativeButton={false}
            variant="outline"
          >
            登入帳號
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}