import 'package:flutter/material.dart';
import '../themes/themes.dart';

class AppDropdownModel<T> extends StatelessWidget {
  final String? etiqueta;
  final String? hint;
  final T? selectedValue;
  final void Function(T?)? onChanged;
  final List<DropdownMenuItem<T>>? items;

  const AppDropdownModel({
    super.key,
    this.etiqueta,
    this.hint,
    this.selectedValue,
    this.onChanged,
    required this.items,
  });

  double _getFontSize(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    if (screenWidth < 480) {
      return 12;
    } else if (screenWidth < 800) {
      return 15;
    }
    return 18;
  }

  @override
  Widget build(BuildContext context) {
    double fontSize = _getFontSize(context);
    TextStyle dropdownTextStyle = TextStyle(fontSize: fontSize);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        if (etiqueta != null &&
            etiqueta!
                .isNotEmpty) // Verifica si la etiqueta no es nula y no está vacía
          Text(
            etiqueta!,
            style: TextStyle(
              fontSize: fontSize,
              fontWeight: FontWeight.bold,
            ),
          ),
        if (etiqueta != null &&
            etiqueta!.isNotEmpty) // Solo muestra el espacio si hay una etiqueta
          const SizedBox(
            height: 5,
          ),
        Container(
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(15)),
          child: DropdownButtonFormField(
            hint: Text(hint ?? '', style: dropdownTextStyle),
            style: dropdownTextStyle,
            borderRadius: BorderRadius.circular(10),
            icon: Icon(
              Icons.arrow_drop_down_circle,
              color: AppTheme.primary,
            ),
            decoration: InputDecoration(
              floatingLabelStyle: TextStyle(
                color: AppTheme.primary,
                fontSize: fontSize,
              ),
              labelStyle: TextStyle(color: Colors.grey, fontSize: fontSize),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
                borderSide: BorderSide(color: AppTheme.tertiary),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
                borderSide: const BorderSide(color: Colors.grey),
              ),
            ),
            value: selectedValue,
            items: items,
            onChanged: onChanged,
          ),
        ),
      ],
    );
  }
}
