import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../../../utils/text_style.dart';
import '../../../utils/text_widget.dart';

class SettingsOptionCard extends StatelessWidget {
  final String iconPath;
  final String title;
  final String? value;
  final VoidCallback? onTap;
  final bool showArrow;
  final double? iconHeight;

  const SettingsOptionCard({
    Key? key,
    required this.iconPath,
    required this.title,
    this.value,
    this.onTap,
    this.showArrow = true,
    this.iconHeight,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final wm = MediaQuery.of(context).size.width / 100;
    final hm = MediaQuery.of(context).size.height / 100;
    final bool isDark = Theme.of(context).brightness == Brightness.dark;

    return GestureDetector(
      onTap: onTap,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: wm * 1, vertical: hm * 0.8),
        decoration: BoxDecoration(
          color: Theme.of(context).cardColor,
          borderRadius: BorderRadius.circular(12),
          border: Border.all(
            color: Theme.of(context).dividerColor.withOpacity(0.2),
            width: 1,
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(isDark ? 0.4 : 0.08),
              blurRadius: 8,
              offset: const Offset(0, 2),
              spreadRadius: 1,
            ),
          ],
        ),
        child: Padding(
          padding: EdgeInsets.symmetric(
            horizontal: wm * 4,
            vertical: hm * 3,
          ),
          child: Row(
            children: [
              Container(
                width: hm * 2.8,
                height: hm * 2.8,
                decoration: BoxDecoration(
                  color: Theme.of(context).dividerColor.withOpacity(0.06),
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Center(
                  child: SvgPicture.asset(
                    iconPath,
                    height: iconHeight ?? hm * 2,
                    width: iconHeight ?? hm * 2,
                    color: isDark ? Colors.white70 : Colors.grey.shade700,
                  ),
                ),
              ),
              SizedBox(width: wm * 4),
              Expanded(
                child: Txt(
                  text: title,
                  style: tS(
                    "Inter",
                    16,
                    FontWeight.w500,
                    isDark ? Colors.white : Colors.black87,
                  ),
                ),
              ),
              if (value != null) ...[
                Txt(
                  text: value!,
                  style: tS(
                    "Inter",
                    14,
                    FontWeight.w400,
                    isDark ? Colors.white70 : Colors.grey.shade600,
                  ),
                ),
                SizedBox(width: wm * 2),
              ],
              if (showArrow)
                Icon(
                  Icons.chevron_right,
                  color: isDark ? Colors.white54 : Colors.grey.shade400,
                  size: hm * 2.5,
                ),
            ],
          ),
        ),
      ),
    );
  }
}