import 'package:flutter/material.dart';
import 'package:quiz_app/app/const/colors/app_colors.dart';
import 'package:quiz_app/data/models/quiz/quiz_listing_model.dart';

class QuizContainerComponent extends StatelessWidget {
  final QuizListingModel data;
  final void Function(String quizId) onTap;

  const QuizContainerComponent({
    required this.data,
    required this.onTap,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => onTap(data.quizId),
      child: Container(
        padding: const EdgeInsets.all(14),
        decoration: BoxDecoration(
          color: AppColors.background,
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: const Color(0xFFE1E4E8)),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withValues(alpha: 0.03),
              blurRadius: 8,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildIconBox(),
            const SizedBox(width: 12),
            Expanded(child: _buildQuizInfo()),
          ],
        ),
      ),
    );
  }

  Widget _buildIconBox() {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: const Color(0xFF0052CC),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Icon(Icons.school, color: Colors.white, size: 28),
    );
  }

  Widget _buildQuizInfo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          data.title,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: Color(0xFF172B4D),
          ),
        ),
        const SizedBox(height: 4),
        Text(
          'Created by ${data.authorName}',
          style: const TextStyle(
            fontSize: 12,
            color: Color(0xFF6B778C),
          ),
        ),
        const SizedBox(height: 8),
        Row(
          children: [
            const Icon(Icons.format_list_bulleted, size: 14, color: Color(0xFF6B778C)),
            const SizedBox(width: 4),
            Text(
              '${data.totalQuiz} Quizzes',
              style: const TextStyle(fontSize: 12, color: Color(0xFF6B778C)),
            ),
            const SizedBox(width: 12),
            const Icon(Icons.access_time, size: 14, color: Color(0xFF6B778C)),
            const SizedBox(width: 4),
            Text(
              '${data.duration} menit',
              style: const TextStyle(fontSize: 12, color: Color(0xFF6B778C)),
            ),
          ],
        ),
      ],
    );
  }
}