import React from 'react';
import { getCarouselImages } from "@/app/actions/adminData";
import CarouselClient from "./CarouselClient";
import Hero from "@/components/Hero";

export default async function CarouselAdminPage() {
  const images = await getCarouselImages();

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-black text-gray-900">Gestion du Carrousel</h1>
      </div>

      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-8">
        <div className="px-6 py-4 border-b border-gray-100 bg-gray-50">
          <h2 className="text-sm font-black text-gray-500 uppercase tracking-wider">Aperçu en direct (Live Preview)</h2>
        </div>
        <div className="pointer-events-none scale-[0.8] origin-top -mb-[10%]">
           <Hero dict={{}} images={images} />
        </div>
      </div>

      <CarouselClient initialImages={images} />
    </div>
  );
}