"use client";

import { useState } from "react";
import dynamic from "next/dynamic";
import Layout from "@/components/layout/Layout";
import CategoryList from "@/components/explorer/CategoryList";

const PlaceList = dynamic(() => import("@/components/explorer/PlaceList"), {
  loading: () => (
    <div className="flex items-center justify-center py-12">
      <p className="text-gray-600">Chargement...</p>
    </div>
  ),
});

export default function ExplorerPage() {
  const [selectedCategory, setSelectedCategory] = useState("all");

  return (
    <Layout>
      <div className="py-6">
        <header className="px-4 mb-6">
          <h1 className="text-2xl font-bold text-primary mb-2">Explorer</h1>
          <p className="text-gray-600">
            Découvrez les meilleurs endroits de Fakarava
          </p>
        </header>

        <CategoryList
          selectedCategory={selectedCategory}
          onCategoryChange={setSelectedCategory}
        />

        <PlaceList category={selectedCategory} />
      </div>
    </Layout>
  );
}