import 'package:eatvio_app/core/theme/theme_helper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class CardSettingsScreen extends StatelessWidget {
  const CardSettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF0F2F5),
      appBar: AppBar(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            bottom: Radius.circular(12),
          ),
        ),
        title: Text('Мои карты'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          const SizedBox(height: 16),
          Material(
            borderRadius: BorderRadius.circular(12),
            color: Colors.white,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 16),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: Text(
                    'Привязанные карты',
                    style: TextStyle(
                      color: Color(0xFF323F4B),
                      fontSize: 18,
                      fontWeight: FontWeight.w600,
                      height: 1,
                    ),
                  ),
                ),
                const SizedBox(height: 8),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: Text(
                    'Выплату будут производиться\nна карту ** 0278',
                    style: TextStyle(
                      color: Color(0xFF323F4B),
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      height: 1,
                    ),
                  ),
                ),
                const SizedBox(height: 16),
                SingleChildScrollView(
                  padding: EdgeInsets.symmetric(horizontal: 16),
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    children: [
                      _card(true),
                      const SizedBox(width: 8),
                      _card(),
                      const SizedBox(width: 8),
                      _card(),
                    ],
                  ),
                ),
                const SizedBox(height: 16),
              ],
            ),
          ),
        ],
      ),
    );
  }

  _card([bool isSelected = false]) {
    return Container(
      padding: EdgeInsets.all(4),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: isSelected ? appTheme.blueA400 : Color(0xFFF1F2F6),
          width: 2,
        ),
      ),
      child: Container(
        width: 148,
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Color(0xFFF1F2F6),
          borderRadius: BorderRadius.circular(4),
        ),
        child: Column(
          children: [
            SvgPicture.asset('assets/icons/mir.svg'),
            const SizedBox(height: 24),
            Text(
              '** 0278',
              style: TextStyle(
                color: Color(0xFF323F4B),
                fontSize: 14,
                height: 1,
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        ),
      ),
    );
  }
}