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

interface DashboardAccessGateProps {
  canAccess: boolean;
}

/**
 * @description KIS 인증 여부에 따라 대시보드 접근 가이드를 렌더링합니다.
 * @param canAccess 대시보드 접근 가능 여부
 * @see features/dashboard/components/DashboardContainer.tsx 인증되지 않은 경우 이 컴포넌트를 렌더링합니다.
 */
export function DashboardAccessGate({ canAccess }: DashboardAccessGateProps) {
  if (canAccess) 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>
  );
}