import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

import '../../../common/extension/extension.dart';
import '../../../common/theme/theme.dart';
import '../../components/spaces/space.dart';

@RoutePage()
class SyncPage extends StatelessWidget {
  const SyncPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.background,
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
          child: Row(
            children: [
              Expanded(
                flex: 2,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [_buildHeader()],
                ),
              ),
              SpaceWidth(40),
              SizedBox(width: 40),
              Expanded(
                flex: 3,
                child: Container(height: context.deviceHeight * 0.8),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Column(
      children: [
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            color: AppColor.primary.withOpacity(0.1),
            borderRadius: BorderRadius.circular(15),
          ),
          child: Icon(Icons.sync, size: 30, color: AppColor.primary),
        ),
        SizedBox(height: 12),
        Text(
          'Sinkronisasi Data',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: Colors.grey.shade800,
          ),
        ),
        SizedBox(height: 8),
        Text(
          'Mengunduh kategori dan produk terbaru',
          style: TextStyle(fontSize: 16, color: Colors.grey.shade600),
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}