'use client';

import { useRouter } from 'next/navigation';

interface ShadowIndicatorProps {
    publicDocId: string;
    publicDocTitle: string;
}

export default function ShadowIndicator({ publicDocId, publicDocTitle }: ShadowIndicatorProps) {
    const router = useRouter();

    return (
        <div className="bg-amber-50 border-l-4 border-amber-400 p-4 mb-4 rounded-r-md shadow-sm">
            <div className="flex items-start">
                <div className="flex-shrink-0">
                    <svg className="h-5 w-5 text-amber-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                    </svg>
                </div>
                <div className="ml-3 flex-1">
                    <p className="text-sm text-amber-700">
                        <span className="font-bold">이름 중복 경고:</span> 이 개인 문서는 같은 이름의 공개 문서를 가리고 있습니다.
                    </p>
                    <p className="text-xs text-amber-600 mt-1">
                        위키링크(<code className="bg-amber-100 text-amber-800 px-1 rounded">[[{publicDocTitle}]]</code>)는 당신에게 이 문서를 우선적으로 연결하지만, 다른 사용자들에게는 공개 문서를 연결합니다.
                    </p>
                    <div className="mt-2">
                        <button
                            onClick={() => router.push(`/docs/${publicDocId}`)}
                            className="text-xs font-medium text-amber-700 hover:text-amber-600 underline"
                        >
                            공개 문서 확인하기 &rarr;
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}