import 'package:bootstrap_icons/bootstrap_icons.dart';
import 'package:flutter/material.dart';
import 'package:english_learning/core/utils/styles/theme.dart';

class ClassFieldWidget extends StatefulWidget {
  final bool isRequired;
  final String labelText;
  final String hintText;
  const ClassFieldWidget({
    super.key,
    required this.labelText,
    required this.hintText,
    this.isRequired = false,
  });

  @override
  State<ClassFieldWidget> createState() => _ClassFieldWidgetState();
}

class _ClassFieldWidgetState extends State<ClassFieldWidget> {
  String? selectedClass;
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text.rich(
          TextSpan(
            children: [
              TextSpan(
                text: widget.labelText,
                style: AppTextStyles.blackTextStyle.copyWith(
                  fontSize: 12,
                  fontWeight: FontWeight.bold,
                ),
              ),
              if (widget.isRequired)
                TextSpan(
                  text: ' *',
                  style: AppTextStyles.blackTextStyle.copyWith(
                    fontSize: 12,
                    fontWeight: FontWeight.bold,
                    color: AppColors.redColor, // Red color for asterisk
                  ),
                ),
            ],
          ),
        ),
        const SizedBox(height: 8),
        DropdownButtonFormField(
          value: selectedClass,
          hint: Text(
            widget.hintText,
            style: AppTextStyles.disableTextStyle.copyWith(
              fontSize: 12,
            ),
          ),
          decoration: InputDecoration(
            contentPadding:
                const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: const BorderSide(
                color: AppColors.disableColor,
                width: 1,
              ),
            ),
          ),
          icon: const Icon(
            BootstrapIcons.chevron_down,
            color: AppColors.greyColor,
            size: 16,
          ),
          items: <String>['Class 1', 'Class 2', 'Class 3', 'Class 4']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(
                value,
                style: AppTextStyles.greyTextStyle.copyWith(
                  fontSize: 12,
                ),
              ),
            );
          }).toList(),
          onChanged: (String? newValue) {
            setState(() {
              selectedClass = newValue;
            });
          },
        ),
      ],
    );
  }
}
