import 'package:doublefeel_flutter/core/util/size_extensions.dart';
import 'package:doublefeel_flutter/r.dart';
import 'package:flutter/material.dart';

import 'watch_face_preview.dart';
import 'watch_theme_section_card.dart';

class DialPreviewCard extends StatelessWidget {
  const DialPreviewCard({super.key});

  @override
  Widget build(BuildContext context) {
    return WatchThemeSectionCard(
      padding: EdgeInsets.fromLTRB(20.dp, 20.dp, 0, 27.dp),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const WatchThemeSectionTitle('表盘预览'),
          SizedBox(height: 16.dp),
          SizedBox(
            height: 136.dp,
            child: ListView.separated(
              padding: EdgeInsets.zero,
              scrollDirection: Axis.horizontal,
              physics: const ClampingScrollPhysics(),
              itemBuilder: (context, index) {
                return WatchFacePreview(
                  width: 114,
                  height: 136,
                  faceAsset: index == 0
                      ? R.assetsImagesWatchThemeFacePreviewAlt
                      : R.assetsImagesWatchThemeFaceDefault,
                );
              },
              separatorBuilder: (context, index) => SizedBox(width: 18.dp),
              itemCount: 2,
            ),
          ),
        ],
      ),
    );
  }
}