import { SidebarProvider } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/AppSidebar";
import { CustomContentManager } from "@/components/CustomContentManager";
import { useTranslation } from 'react-i18next';

export default function CustomContent() {
  const { t } = useTranslation();

  return (
    <SidebarProvider>
      <div className="min-h-screen flex w-full bg-slate-900">
        <AppSidebar />
        <main className="flex-1 bg-slate-900 text-white">
          <div className="flex flex-col gap-6 p-6">
            <div>
              <h1 className="text-3xl font-bold text-white">{t('customContent.title')}</h1>
              <p className="text-slate-400 mt-2">
                {t('customContent.description')}
              </p>
            </div>
            <CustomContentManager />
          </div>
        </main>
      </div>
    </SidebarProvider>
  );
}
