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

import '../models/dialogue_models.dart';

/// 角色頭像組件
class CharacterAvatar extends StatelessWidget {
  final DialogueCharacter character;
  final bool showDetails;
  final double size;

  const CharacterAvatar({
    super.key,
    required this.character,
    this.showDetails = false,
    this.size = 80.0,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 頭像
        Container(
          width: size.w,
          height: size.w,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(
              color: Theme.of(context).primaryColor,
              width: 2,
            ),
          ),
          child: ClipOval(
            child: CachedNetworkImage(
              imageUrl: character.avatarUrl,
              fit: BoxFit.cover,
              placeholder: (context, url) => Container(
                color: Colors.grey[300],
                child: Icon(
                  Icons.person,
                  size: size.w * 0.5,
                  color: Colors.grey[600],
                ),
              ),
              errorWidget: (context, url, error) => Container(
                color: Colors.grey[300],
                child: Icon(
                  Icons.person,
                  size: size.w * 0.5,
                  color: Colors.grey[600],
                ),
              ),
            ),
          ),
        ),
        
        if (showDetails) ...[
          SizedBox(height: 8.h),
          
          // 角色名稱
          Text(
            character.name,
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
          
          SizedBox(height: 4.h),
          
          // 角色職業
          Text(
            character.role,
            style: TextStyle(
              color: Colors.white70,
              fontSize: 12.sp,
            ),
          ),
        ],
      ],
    );
  }
}