import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/models/home_page_content/content.dart';
import 'package:didvan/views/widgets/didvan/card.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:didvan/views/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';
import 'package:persian_number_utility/persian_number_utility.dart';

class MainPageVideocastItem extends StatelessWidget {
  final MainPageContentType content;
  const MainPageVideocastItem({super.key, required this.content});

  @override
  Widget build(BuildContext context) {
    return DidvanCard(
      padding: EdgeInsets.zero,
      child: Stack(
        children: [
          SkeletonImage(
            width: double.infinity,
            height: double.infinity,
            imageUrl: content.image,
          ),
          Center(
            child: Container(
              height: 36,
              width: 36,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Theme.of(context).colorScheme.secondary.withOpacity(0.7),
              ),
              child: Icon(
                DidvanIcons.play_solid,
                color: Theme.of(context).colorScheme.white,
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(12),
                  bottomRight: Radius.circular(12),
                ),
                boxShadow: DesignConfig.defaultShadow,
                color: Theme.of(context).colorScheme.surface,
              ),
              width: MediaQuery.of(context).size.width / 3,
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  DidvanText(
                    content.title,
                    style: Theme.of(context).textTheme.bodyLarge,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 4),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Icon(
                          DidvanIcons.calendar_day_light,
                          size: 16,
                        ),
                        DidvanText(
                          DateTime.parse(content.subtitles[0])
                              .toPersianDateStr(),
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: Theme.of(context).textTheme.bodySmall,
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}