import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:kasy_kit/core/theme/theme.dart';
import 'package:kasy_kit/core/widgets/kasy_hover.dart';
import 'package:kasy_kit/features/notifications/providers/models/notification.dart'
    as app;
import 'package:kasy_kit/features/notifications/ui/widgets/notification_tile.dart';

class NotificationTileComponent extends StatelessWidget {
  final app.Notification notification;
  final OnTapNotification? onTap;
  final int index;

  const NotificationTileComponent({
    super.key,
    required this.notification,
    required this.index,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Animate(
      effects: const [
        FadeEffect(duration: Duration(milliseconds: 200)),
        MoveEffect(
          duration: Duration(milliseconds: 200),
          curve: Curves.easeOutCubic,
          begin: Offset(0, 12),
        ),
      ],
      delay: index < 6 ? Duration(milliseconds: 60 * index) : Duration.zero,
      onComplete: (controller) => controller.stop(),
      child: KasyHover(
        onTap: () => onTap?.call(notification),
        borderRadius: KasyRadius.smBorderRadius,
        margin: const EdgeInsets.only(top: KasySpacing.sm),
        child: NotificationTile.from(
          key: ValueKey('notification_${notification.id}'),
          context,
          notification,
        ),
      ),
    );
  }
}
