import 'package:doublefeel_flutter/app/modules/watch_theme/models/watch_theme_models.dart';
import 'package:flutter/material.dart';
import 'package:doublefeel_flutter/l10n/l10n_extensions.dart';

import 'watch_theme_character_avatar.dart';
import 'watch_theme_section_card.dart';

class StatusPreviewCard extends StatelessWidget {
  final WatchThemeItem themeItem;
  const StatusPreviewCard({super.key, required this.themeItem});

  @override
  Widget build(BuildContext context) {
    return WatchThemeSectionCard(
      padding: const EdgeInsets.fromLTRB(20, 20, 20, 17),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          WatchThemeSectionTitle(context.l10n.watchThemeStatusPreview),
          const SizedBox(height: 24),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: _previewItemView(),
          ),
        ],
      ),
    );
  }

  List<Widget> _previewItemView() {
    final infoList = themeItem.infoList;
    return [
      for (var i = 0; i < infoList.length; i++)
        Column(
          children: [
            WatchThemeCharacterAvatar(
              size: 56,
              assetPath: infoList[i].assetPath,
              imageUrl: infoList[i].imgUrl,
            ),
            const SizedBox(height: 4),
            Text(
              i < infoList.length ? infoList[i].title : '',
              style: TextStyle(
                color: defaultThemeTemplates[i].color,
                fontSize: 12,
                fontWeight: FontWeight.w400,
              ),
            ),
          ],
        ),
    ];
  }
}