import Link from "next/link";
import { Button } from "@/components/ui/button";

interface TradeAccessGateProps {
  canTrade: boolean;
}

/**
 * @description KIS 인증 여부에 따라 트레이드 화면 접근 가이드를 렌더링합니다.
 * @see features/trade/components/TradeContainer.tsx TradeContainer의 인증 가드 UI를 분리합니다.
 * @see app/(main)/settings/page.tsx 미인증 사용자를 설정 페이지로 이동시킵니다.
 */
export function TradeAccessGate({ canTrade }: TradeAccessGateProps) {
  if (canTrade) return null;

  return (
    <div className="flex h-full items-center justify-center p-6">
      <section className="w-full max-w-xl rounded-2xl border border-brand-200 bg-background p-6 shadow-sm dark:border-brand-800/45 dark:bg-brand-900/18">
        {/* ========== UNVERIFIED NOTICE ========== */}
        <h2 className="text-lg font-semibold text-foreground">
          트레이딩을 시작하려면 한국투자증권 연결이 필요합니다.
        </h2>
        <p className="mt-2 text-sm text-muted-foreground">
          설정 페이지에서 앱키, 앱시크릿키, 계좌번호를 입력하고 연결을 완료해 주세요.
        </p>

        {/* ========== ACTION ========== */}
        <div className="mt-4">
          <Button asChild className="bg-brand-600 hover:bg-brand-700">
            <Link href="/settings">설정 페이지로 이동</Link>
          </Button>
        </div>
      </section>
    </div>
  );
}