import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:rasadyar_core/core.dart';

import 'logic.dart';

class RolePage extends GetView<RoleLogic> {
  const RolePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Assets.rive.shapes.rive(fit: BoxFit.cover),
          Positioned.fill(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
              child: Container(color: Colors.white.withValues(alpha: 0.2)),
            ),
          ),
          Container(
            height: 400.h,
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: Card(
              child: Column(
                children: [
                  SizedBox(height: 12.h),
                  Text(
                    'انتخاب نقش',
                    style: AppFonts.yekan20Bold.copyWith(color: AppColor.textColor),
                  ),
                  Expanded(
                    child: GridView.builder(
                      physics: BouncingScrollPhysics(),
                      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                        maxCrossAxisExtent: 250,
                        mainAxisSpacing: 12,
                        crossAxisSpacing: 12,
                        childAspectRatio: 1.5,
                      ),
                      itemCount: 3,
                      hitTestBehavior: HitTestBehavior.opaque,
                      itemBuilder: (BuildContext context, int index) {
                        return roleCard(title:  index == 0 ? 'نasdsadasdقش $index' : "wlsp", onTap: null);
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget roleCard({required String title, Function()? onTap}) {
    return Container(
      margin: EdgeInsets.all(8.w),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.r),
        border: Border.all(color: AppColor.blueNormal, width: 1.w),
      ),
      child: InkWell(
        onTap: onTap,
        child: Center(
          child: Text(title, style: AppFonts.yekan16Bold.copyWith(color: AppColor.blueNormal)),
        ),
      ),
    );
  }
}