import React from 'react';
import { Construction, LayoutDashboard } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import PageLayout from '../layout/PageLayout';

export default function Dashboard() {
  const { t } = useTranslation(['translation', 'navigation']);

  const breadcrumbItems = [
    { label: t('translation:dashboard.title') }
  ];

  return (
    <PageLayout
      title={t('translation:dashboard.title')}
      subtitle={t('translation:dashboard.subtitle')}
      breadcrumbItems={breadcrumbItems}
    >
      {/* Test translation entry - temporary verification */}
      <div className="mb-6 p-4 bg-blue-100 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
        <h3 className="text-lg font-semibold text-blue-900 dark:text-blue-100 mb-2">Test de traduction</h3>
        <p className="text-blue-800 dark:text-blue-200">
          Valeur de test: <strong>{t('translation:test.verification')}</strong>
        </p>
        <p className="text-blue-600 dark:text-blue-400 text-sm mt-1">
          Si vous voyez "Ceci est un test de vérification des traductions" ci-dessus, la base de données fonctionne correctement.
        </p>
      </div>
      
      <div className="flex flex-col items-center justify-center min-h-[400px]">
        <div className="text-center bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-8">
          <div className="bg-blue-500/20 rounded-full p-6 mb-6 inline-block">
            <Construction className="h-16 w-16 text-blue-400" />
          </div>
          
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
            {t('translation:dashboard.underConstruction.title')}
          </h2>
          <p className="text-gray-600 dark:text-slate-400 text-lg mb-6 max-w-md">
            {t('translation:dashboard.underConstruction.message')}
          </p>
          
          <div className="flex items-center justify-center space-x-2 text-gray-500 dark:text-slate-500">
            <LayoutDashboard className="h-5 w-5" />
            <span className="text-sm">{t('translation:dashboard.underConstruction.comingSoon')}</span>
          </div>
        </div>
      </div>
    </PageLayout>
  );
}