"use client";

import { ReactNode } from "react";
import Link from "next/link";
import { ArrowLeft, Printer, Download } from "lucide-react";

interface DocumentLayoutProps {
  children: ReactNode;
  title: string;
  docNumber?: string;
}

export default function DocumentLayout({ children, title, docNumber }: DocumentLayoutProps) {
  return (
    <div className="min-h-screen bg-[#F8F9FC]">
      {/* Navigation Bar */}
      <div className="bg-[#1E3A5F] border-b-4 border-[#0F172A] px-6 py-3 print:hidden">
        <div className="max-w-[842px] mx-auto flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link
              href="/admin/screenMng/reportList/samples"
              className="flex items-center gap-2 text-white hover:text-[#EFF6FF] transition-colors border-2 border-white px-3 py-1"
            >
              <ArrowLeft className="w-4 h-4" />
              <span className="text-sm">돌아가기</span>
            </Link>
            <div className="h-6 w-px bg-[#64748B]" />
            <h1 className="text-lg text-white">{title}</h1>
            {docNumber && (
              <span className="text-xs text-[#94A3B8] border border-[#475569] px-2 py-0.5">{docNumber}</span>
            )}
          </div>
          <div className="flex items-center gap-3">
            <button
              onClick={() => window.print()}
              className="flex items-center gap-2 px-4 py-2 bg-white text-[#1E3A5F] border-2 border-white hover:bg-[#EFF6FF] transition-colors text-sm"
            >
              <Printer className="w-4 h-4" />
              인쇄
            </button>
            <button className="flex items-center gap-2 px-4 py-2 border-2 border-white text-white hover:bg-[#2563EB] hover:border-[#2563EB] transition-colors text-sm">
              <Download className="w-4 h-4" />
              다운로드
            </button>
          </div>
        </div>
      </div>

      {/* Document Container */}
      <div className="py-8 px-4">
        <div className="max-w-[842px] mx-auto bg-white border-4 border-[#1E3A5F] print:border-2">
          {children}
        </div>
      </div>
    </div>
  );
}
