import 'package:flutter/material.dart';
import 'package:sigap/src/utils/constants/colors.dart';
import 'package:sigap/src/utils/constants/sizes.dart';

class GenderSelection extends StatelessWidget {
  // Make selectedGender nullable with a default value
  final String? selectedGender;
  final Function(String?) onGenderChanged;
  final String? errorText;

  const GenderSelection({
    super.key,
    required this.selectedGender,
    required this.onGenderChanged,
    this.errorText,
  });

  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    // Use a null-safe approach with selectedGender
    final effectiveGender = selectedGender ?? 'Male';

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Gender', style: Theme.of(context).textTheme.bodyMedium),
        const SizedBox(height: TSizes.xs),
        Row(
          children: [
            _buildRadioOption(context, 'Male', isDark, effectiveGender),
            const SizedBox(width: TSizes.spaceBtwItems),
            _buildRadioOption(context, 'Female', isDark, effectiveGender),
          ],
        ),
        if (errorText != null && errorText!.isNotEmpty)
          Padding(
            padding: const EdgeInsets.only(top: TSizes.xs),
            child: Text(
              errorText!,
              style: TextStyle(
                color: TColors.error,
                fontSize: TSizes.fontSizeXs,
              ),
            ),
          ),
        const SizedBox(height: TSizes.spaceBtwInputFields),
      ],
    );
  }

  // Update the _buildRadioOption method to use effectiveGender
  Widget _buildRadioOption(
    BuildContext context,
    String gender,
    bool isDark,
    String effectiveGender,
  ) {
    return Expanded(
      child: InkWell(
        onTap: () => onGenderChanged(gender),
        child: Container(
          padding: const EdgeInsets.symmetric(
            horizontal: TSizes.md,
            vertical: TSizes.md,
          ),
          decoration: BoxDecoration(
            border: Border.all(
              color:
                  effectiveGender == gender
                      ? Theme.of(context).primaryColor
                      : isDark
                      ? TColors.darkGrey
                      : TColors.grey,
              width: effectiveGender == gender ? 2 : 1,
            ),
            borderRadius: BorderRadius.circular(TSizes.borderRadiusSm),
            color:
                effectiveGender == gender
                    ? Theme.of(context).primaryColor.withOpacity(0.1)
                    : Colors.transparent,
          ),
          child: Row(
            children: [
              Icon(
                effectiveGender == gender
                    ? Icons.radio_button_checked
                    : Icons.radio_button_off,
                color:
                    effectiveGender == gender
                        ? Theme.of(context).primaryColor
                        : isDark
                        ? TColors.white
                        : TColors.dark,
                size: TSizes.iconSm,
              ),
              const SizedBox(width: TSizes.xs),
              Text(
                gender,
                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                  color:
                      effectiveGender == gender
                          ? Theme.of(context).primaryColor
                          : null,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
