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

/// 對話背景組件
class DialogueBackground extends StatelessWidget {
  final String scenarioId;
  final String? backgroundUrl;

  const DialogueBackground({
    super.key,
    required this.scenarioId,
    this.backgroundUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      child: Stack(
        fit: StackFit.expand,
        children: [
          // 背景圖片
          if (backgroundUrl != null)
            CachedNetworkImage(
              imageUrl: backgroundUrl!,
              fit: BoxFit.cover,
              placeholder: (context, url) => Container(
                color: Colors.grey[800],
                child: Center(
                  child: CircularProgressIndicator(
                    color: Theme.of(context).primaryColor,
                  ),
                ),
              ),
              errorWidget: (context, url, error) => Container(
                color: Colors.grey[800],
                child: Icon(
                  Icons.image_not_supported,
                  color: Colors.grey[600],
                  size: 64,
                ),
              ),
            )
          else
            Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Colors.blue[900]!,
                    Colors.purple[900]!,
                  ],
                ),
              ),
            ),
          
          // 漸層覆蓋層
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Colors.black.withOpacity(0.3),
                  Colors.transparent,
                  Colors.black.withOpacity(0.7),
                ],
                stops: const [0.0, 0.5, 1.0],
              ),
            ),
          ),
        ],
      ),
    );
  }
}