import 'package:flutter/material.dart';
import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';

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

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

  final String? title;
  final String? themeImageUrl;

  @override
  Widget build(BuildContext context) {
    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,
          ),
        ),
      ],
    );
  }
}