'use client';

import { Presentation } from 'lucide-react';

interface PortfolioViewerProps {
    pdfUrl?: string;
}

export default function PortfolioViewer({
    pdfUrl = '/portfolio/HO_PHUC_VINH_PORTFOLIO.pdf',
}: PortfolioViewerProps) {

    return (
        <div className="relative w-full max-w-5xl mx-auto px-4">
            {/* Main Container */}
            <div className="relative bg-white rounded-2xl md:rounded-3xl shadow-2xl overflow-hidden">
                {/* Custom Header Bar */}
                <div className="bg-gradient-to-r from-red-600 via-red-500 to-orange-600 px-4 md:px-6 py-4">
                    <div className="flex items-center gap-3 md:gap-4">
                        <div className="flex gap-2">
                            <div className="w-3 h-3 rounded-full bg-green-300 shadow-sm" />
                        </div>
                        <div className="flex items-center gap-2">
                            <Presentation className="w-4 h-4 md:w-5 md:h-5 text-white" />
                            <div className="text-white font-bold text-xs md:text-base">
                                Portfolio - <span className="text-yellow-300 font-extrabold">V_LOG</span> <span className="text-white font-extrabold">MEDIA</span>
                            </div>
                        </div>
                    </div>
                </div>

                {/* PDF Viewer Container */}
                <div
                    className="relative w-full bg-neutral-50 overflow-hidden"
                    style={{ height: 'clamp(500px, 65vh, 700px)' }}
                >
                    <div className="absolute inset-0" style={{ right: '-14px' }}>
                        <iframe
                            src={`${pdfUrl}#toolbar=0&navpanes=0&scrollbar=0&view=FitH`}
                            className="w-full h-full"
                            style={{ border: 'none' }}
                            title="Portfolio PDF"
                        />
                    </div>
                </div>

                {/* Footer Note */}
                <div className="bg-gradient-to-r from-neutral-50 via-white to-neutral-50 px-4 md:px-6 py-3 border-t border-neutral-200">
                    <div className="flex items-center justify-center gap-2 text-sm text-neutral-600">
                        <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
                        <div className="font-medium hidden md:inline">
                            Khám phá các dự án đã thực hiện của <span className="text-red-600 font-extrabold">V_LOG</span> <span className="text-neutral-900 font-extrabold">MEDIA</span>
                        </div>
                        <span className="font-medium md:hidden">Xem các dự án của chúng tôi</span>
                    </div>
                </div>
            </div>
        </div>
    );
}
