@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gray-100 py-12">
    <div class="max-w-4xl mx-auto px-4">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-4">اختبار مكون الأزرار المحسن</h1>
            <p class="text-gray-600">صفحة اختبار لضمان عمل مكون enhanced-button بشكل صحيح</p>
        </div>

        <div class="bg-white rounded-lg shadow-lg p-8">
            <h2 class="text-2xl font-bold mb-6">الأزرار الأساسية</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
                <div class="text-center">
                    <h3 class="font-semibold mb-2">الزر الأساسي</h3>
                    <x-enhanced-button variant="primary" size="md" ripple="true">
                        زر أساسي
                    </x-enhanced-button>
                </div>
                
                <div class="text-center">
                    <h3 class="font-semibold mb-2">الزر الثانوي</h3>
                    <x-enhanced-button variant="secondary" size="md" ripple="true">
                        زر ثانوي
                    </x-enhanced-button>
                </div>
                
                <div class="text-center">
                    <h3 class="font-semibold mb-2">الزر المميز</h3>
                    <x-enhanced-button variant="accent" size="md" glow="true" ripple="true">
                        زر مميز
                    </x-enhanced-button>
                </div>
            </div>

            <h2 class="text-2xl font-bold mb-6">أزرار الحالة</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
                <div class="text-center">
                    <h3 class="font-semibold mb-2">زر النجاح</h3>
                    <x-enhanced-button variant="success" size="md" ripple="true">
                        نجح
                    </x-enhanced-button>
                </div>
                
                <div class="text-center">
                    <h3 class="font-semibold mb-2">زر التحذير</h3>
                    <x-enhanced-button variant="warning" size="md" pulse="true" ripple="true">
                        تحذير
                    </x-enhanced-button>
                </div>
                
                <div class="text-center">
                    <h3 class="font-semibold mb-2">زر الخطر</h3>
                    <x-enhanced-button variant="danger" size="md" ripple="true">
                        حذف
                    </x-enhanced-button>
                </div>
            </div>

            <h2 class="text-2xl font-bold mb-6">أحجام الأزرار</h2>
            
            <div class="flex flex-wrap items-center gap-4 mb-8">
                <div class="text-center">
                    <h4 class="font-semibold mb-2">صغير جداً</h4>
                    <x-enhanced-button variant="primary" size="xs" ripple="true">
                        xs
                    </x-enhanced-button>
                </div>
                
                <div class="text-center">
                    <h4 class="font-semibold mb-2">صغير</h4>
                    <x-enhanced-button variant="primary" size="sm" ripple="true">
                        sm
                    </x-enhanced-button>
                </div>
                
                <div class="text-center">
                    <h4 class="font-semibold mb-2">متوسط</h4>
                    <x-enhanced-button variant="primary" size="md" ripple="true">
                        md
                    </x-enhanced-button>
                </div>
                
                <div class="text-center">
                    <h4 class="font-semibold mb-2">كبير</h4>
                    <x-enhanced-button variant="primary" size="lg" ripple="true">
                        lg
                    </x-enhanced-button>
                </div>
                
                <div class="text-center">
                    <h4 class="font-semibold mb-2">كبير جداً</h4>
                    <x-enhanced-button variant="primary" size="xl" ripple="true">
                        xl
                    </x-enhanced-button>
                </div>
            </div>

            <div class="text-center">
                <h2 class="text-2xl font-bold mb-6">حالات الأزرار</h2>
                
                <div class="flex flex-wrap justify-center gap-4">
                    <x-enhanced-button variant="primary" size="md" loading="true">
                        جاري التحميل...
                    </x-enhanced-button>
                    
                    <x-enhanced-button variant="primary" size="md" disabled="true">
                        زر معطل
                    </x-enhanced-button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection