import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 詞彙面板
class VocabularyPanel extends StatelessWidget {
  final List<String> vocabularies;
  final Set<String> usedVocabularies;

  const VocabularyPanel({
    super.key,
    required this.vocabularies,
    required this.usedVocabularies,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150.w,
      padding: EdgeInsets.all(12.w),
      decoration: BoxDecoration(
        color: Colors.black.withOpacity(0.7),
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '指定詞彙',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
          
          SizedBox(height: 8.h),
          
          ...vocabularies.map((word) => Padding(
            padding: EdgeInsets.only(bottom: 4.h),
            child: Row(
              children: [
                Icon(
                  usedVocabularies.contains(word) ? Icons.check : Icons.radio_button_unchecked,
                  color: usedVocabularies.contains(word) ? Colors.green : Colors.grey,
                  size: 14.sp,
                ),
                SizedBox(width: 6.w),
                Expanded(
                  child: Text(
                    word,
                    style: TextStyle(
                      color: usedVocabularies.contains(word) ? Colors.green : Colors.white70,
                      fontSize: 12.sp,
                      decoration: usedVocabularies.contains(word) ? TextDecoration.lineThrough : null,
                    ),
                  ),
                ),
              ],
            ),
          )).toList(),
        ],
      ),
    );
  }
}