import 'package:doublefeel_flutter/core/config/app_environment_config.dart';
import 'package:flutter/material.dart';
import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';
import 'package:get/get.dart';

import 'watch_face_preview.dart';
import 'watch_theme_colors.dart';

class WatchThemeHeader extends StatelessWidget {
  const WatchThemeHeader({
    super.key,
    this.title,
    this.errorDesc,
    this.themeImageUrl,
  });


  final String? title;
  final String? errorDesc;
  final String? themeImageUrl;

  @override
  Widget build(BuildContext context) {
    final environmentConfig = Get.find<AppEnvironmentConfig>();
    
    return Column(
      children: [
        SizedBox(height: 12),
        Center(
          child: WatchFacePreview(
            type: WatchFacePreviewType.singleMedium,
            themeImageUrl: themeImageUrl,
          ),
        ),
        SizedBox(height: 12),
        Text(
          title ?? context.l10n.watchThemeDefaultTheme,
          style: TextStyle(
            color: WatchThemeColors.textPrimary,
            fontSize: 20,
            fontWeight: FontWeight.w600,
            height: 1.25,
          ),
        ),
        if (environmentConfig.isDebug && errorDesc != null) ...[
          SizedBox(height: 8),
          Text(
            errorDesc!,
            style: TextStyle(
              color: WatchThemeColors.pro,
              fontSize: 14,
              fontWeight: FontWeight.w400,
            ),
            maxLines: 2,
          ),
        ],
      ],
    );
  }
}