import 'package:flutter/material.dart';
import 'package:real_estate_mobile/core/constants/app_colors.dart';

class RoleToggle extends StatelessWidget {
  final String selectedRole;
  final ValueChanged<String> onChanged;

  const RoleToggle({
    super.key,
    required this.selectedRole,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: AppColors.inputFill,
        borderRadius: BorderRadius.circular(20),
      ),
      padding: const EdgeInsets.all(2),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          _buildToggleButton('User', 'USER'),
          _buildToggleButton('Admin', 'AGENT'),
        ],
      ),
    );
  }

  Widget _buildToggleButton(String label, String role) {
    final isSelected = selectedRole == role;
    return GestureDetector(
      onTap: () => onChanged(role),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 10),
        decoration: BoxDecoration(
          color: isSelected ? AppColors.primaryDark : Colors.transparent,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Text(
          label,
          style: TextStyle(
            fontFamily: 'Fractul',
            fontSize: 14,
            fontWeight: FontWeight.w300,
            color: isSelected ? AppColors.inputFill : AppColors.primaryDark,
          ),
        ),
      ),
    );
  }
}