import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:google_fonts/google_fonts.dart';

typedef OnChangedCallback = void Function(dynamic value);

class DropDownWidget extends StatelessWidget {
  final String label;
  final List list;
  final String listTitle;
  final OnChangedCallback onChanged;
  // final String value;

  const DropDownWidget({
    super.key,
    required this.label,
    required this.list,
    required this.listTitle,
    required this.onChanged,
  });
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '$label:',
          style: GoogleFonts.inter(
            textStyle: const TextStyle(color: Colors.white, fontSize: 12, fontWeight: FontWeight.w500),
          ),
        ),
        const Gap(8),
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4), // Set the desired border radius
            border: Border.all(color: const Color.fromRGBO(255, 255, 255, 1)),
          ),
          child: DropdownMenu(
            initialSelection: '',
            dropdownMenuEntries: [
              for (var item in list)
                DropdownMenuEntry(
                    label: item[listTitle].toString(),
                    value: item[listTitle].toString(),
                    style: ButtonStyle(
                        foregroundColor: WidgetStateProperty.all<Color>(const Color.fromRGBO(10, 10, 10, 1)),
                        textStyle: WidgetStateProperty.all<TextStyle>(
                            GoogleFonts.inter(fontSize: 16, fontWeight: FontWeight.w500)))),
            ],
            onSelected: onChanged,
            trailingIcon: Icon(
              Icons.arrow_drop_down_sharp,
              size: 24,
              color: Colors.white,
            ),
            selectedTrailingIcon: Icon(Icons.arrow_drop_up_sharp, size: 24, color: Colors.white),
            width: MediaQuery.of(context).size.width * 0.9,
            menuHeight: MediaQuery.of(context).size.height * 0.8,
            textStyle: GoogleFonts.inter(
                textStyle: const TextStyle(color: Color.fromRGBO(255, 255, 255, 1), fontSize: 16),
                fontWeight: FontWeight.w500),
            menuStyle: MenuStyle(
              // backgroundColor: WidgetStateProperty.all<Color>(const Color.fromRGBO(21, 13, 35, 0.902)),
              backgroundColor: WidgetStateProperty.all<Color>(const Color.fromRGBO(255, 255, 255, 1)),
              padding: WidgetStateProperty.all(const EdgeInsets.symmetric(vertical: 16, horizontal: 8)),
              shape: WidgetStateProperty.all(RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4), // Set the border radius for the dropdown menu
              )),
            ),
          ),
        ),
      ],
    );
  }
}