<?php

require_once __DIR__ . '/../vendor/autoload.php';

use PHPNative\Framework\Application;
use PHPNative\Ui\Widget\Button;
use PHPNative\Ui\Widget\Container;
use PHPNative\Ui\Window;

$app = new Application();
$window = new Window('Gap Test', 600, 400);

// Main container
$mainContainer = new Container('flex flex-col p-4 bg-gray-100 gap-4');

// Test 1: Row with gap-2
$test1 = new Container('flex flex-col gap-2');
$test1->addComponent(new \PHPNative\Ui\Widget\Label('Test 1: flex-row gap-2', 'text-lg font-bold'));
$row1 = new Container('flex flex-row gap-2 bg-white p-4');
$row1->addComponent(new Button('Button 1', 'px-4 py-2 bg-blue-600 text-white rounded'));
$row1->addComponent(new Button('Button 2', 'px-4 py-2 bg-green-600 text-white rounded'));
$test1->addComponent($row1);
$mainContainer->addComponent($test1);

// Test 2: Row with gap-4
$test2 = new Container('flex flex-col gap-2');
$test2->addComponent(new \PHPNative\Ui\Widget\Label('Test 2: flex-row gap-4', 'text-lg font-bold'));
$row2 = new Container('flex flex-row gap-4 bg-white p-4');
$row2->addComponent(new Button('Button A', 'px-4 py-2 bg-red-600 text-white rounded'));
$row2->addComponent(new Button('Button B', 'px-4 py-2 bg-purple-600 text-white rounded'));
$test2->addComponent($row2);
$mainContainer->addComponent($test2);

// Test 3: Row with gap-8
$test3 = new Container('flex flex-col gap-2');
$test3->addComponent(new \PHPNative\Ui\Widget\Label('Test 3: flex-row gap-8', 'text-lg font-bold'));
$row3 = new Container('flex flex-row gap-8 bg-white p-4');
$row3->addComponent(new Button('Btn X', 'px-4 py-2 bg-orange-600 text-white rounded'));
$row3->addComponent(new Button('Btn Y', 'px-4 py-2 bg-pink-600 text-white rounded'));
$test3->addComponent($row3);
$mainContainer->addComponent($test3);

// Test 4: Column with gap-4
$test4 = new Container('flex flex-col gap-2');
$test4->addComponent(new \PHPNative\Ui\Widget\Label('Test 4: flex-col gap-4', 'text-lg font-bold'));
$col = new Container('flex flex-col gap-4 bg-white p-4');
$col->addComponent(new Button('Top Button', 'px-4 py-2 bg-teal-600 text-white rounded'));
$col->addComponent(new Button('Bottom Button', 'px-4 py-2 bg-indigo-600 text-white rounded'));
$test4->addComponent($col);
$mainContainer->addComponent($test4);

$window->setRoot($mainContainer);
$app->addWindow($window);

echo "Gap Test Example\n";
echo "You should see:\n";
echo "- Row 1: 2 buttons with 8px gap (gap-2)\n";
echo "- Row 2: 2 buttons with 16px gap (gap-4)\n";
echo "- Row 3: 2 buttons with 32px gap (gap-8)\n";
echo "- Column: 2 buttons stacked with 16px gap (gap-4)\n\n";

$app->run();