"use client";

import { Lightbulb } from "lucide-react";
import { useBrand } from "@/context/brand-context";
import { AiRecommendationsSection } from "@/app/site-tag-analytics/ai-recommendations-section";

export default function AiRecommendationsPage() {
  const { brand } = useBrand();

  if (!brand?.id) return null;

  return (
    <div className="max-w-5xl mx-auto px-4 py-6 space-y-6">
      <div>
        <div className="flex items-center gap-2 mb-1">
          <Lightbulb className="w-5 h-5 text-amber-500" />
          <h1 className="text-xl font-bold text-slate-900">AI Recommendations</h1>
        </div>
        <p className="text-sm text-slate-500">
          Prioritised, data-backed recommendations generated by the AI Strategy Engine.
          Review, start, complete, or dismiss each recommendation.
        </p>
      </div>

      <AiRecommendationsSection brandId={brand.id} />
    </div>
  );
}
