web/src/components/ReviewBanner.tsx

import React from 'react';
import { Button } from './ui/button';
import { X, BookOpen } from 'lucide-react';

interface ReviewBannerProps {
  onReview: () => void;
  onDismiss: () => void;
}

export function ReviewBanner({ onReview, onDismiss }: ReviewBannerProps) {
  return (
    <div className="mx-4 my-2 p-4 bg-primary/10">
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-3 flex-1">
          <div className="flex-shrink-0">
            <BookOpen className="h-5 w-5 text-primary" />
          </div>
          <div className="flex-1">
            <p className="text-sm font-medium text-foreground">
              Time to review! 📚
            </p>
            <p className="text-xs text-muted-foreground mt-1">
              You have topics that need your attention. Review them to strengthen your learning.
            </p>
          </div>
        </div>
        <div className="flex items-center gap-2 flex-shrink-0">
          <Button
            size="sm"
            onClick={onReview}
            className="bg-red-500 hover:bg-red-600 text-white"
          >
            Review
          </Button>
          <Button
            variant="ghost"
            size="icon"
            onClick={onDismiss}
            className="h-8 w-8"
            aria-label="Dismiss"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  );
}