'use client';

import React from 'react';
import AdBanner from '@/components/ads/AdBanner';

export default function ToolsLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <div className="flex flex-col min-h-screen">
            <div className="flex-grow relative">
                {children}

                {/* Desktop Sidebar Ad - High Resolution Only */}
                {/* Positioned absolute to the right, only visible on very wide screens (2xl) */}
                <div className="hidden 2xl:block absolute right-4 top-32 w-[160px] z-10">
                    <div className="sticky top-24">
                        <div className="text-center text-[10px] text-slate-300 mb-1">AD</div>
                        <AdBanner
                            dataAdSlot="sidebar-slot-id"
                            dataAdFormat="vertical"
                            className="min-h-[600px] w-[160px]"
                        />
                    </div>
                </div>
            </div>

            {/* Footer Ad Placement - Appears on ALL tool pages */}
            <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl pb-8">
                <div className="mx-auto max-w-4xl text-center text-xs text-slate-400 mb-2">
                    Sponsored
                </div>
                <AdBanner
                    dataAdSlot="1234567890" // Placeholder
                    dataAdFormat="auto"
                    fullWidthResponsive={true}
                    className="bg-slate-50 rounded-xl p-4 border border-slate-100 min-h-[100px]"
                />
            </div>
        </div>
    );
}