'use client';

import dynamic from 'next/dynamic';
import React from 'react';
import { useTranslation } from '@alga-psa/ui/lib/i18n/client';

function ExtensionLoading() {
  const { t } = useTranslation('common');
  return <div className="flex items-center justify-center h-64 text-gray-500">{t('pages.loading.extension')}</div>;
}

const DynamicExtensionDetails = dynamic(
  () => import('@product/settings-extensions/entry').then((mod) => mod.ExtensionDetails),
  {
    ssr: false,
    loading: () => <ExtensionLoading />,
  }
);

export default function ExtensionDetailsPage() {
  return <DynamicExtensionDetails />;
}
