import React from 'react';
import { useParams } from 'react-router-dom';
import { PageSection } from '@/shared/components/layout/PageSection';
import { PanelLoadingState } from '@/shared/components/ui/PageState';
import { useLocale } from '@/app/providers/LocaleProvider';
import { ProjectPageShell } from '@/features/projects/components/ProjectPageShell';
import { BurndownChart } from '@/features/projects/components/BurndownChart';
import { useProjectBurndown } from '@/features/projects/hooks/useProjectAnalytics';

const ProjectBurndownPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const { t } = useLocale();
  const { data, isLoading } = useProjectBurndown(id);

  return (
    <ProjectPageShell projectId={id}>
      {() => (
        <PageSection title={t('projects:burndown.title')}>
          {isLoading ? (
            <PanelLoadingState label={t('projects:states.loading')} />
          ) : (
            <BurndownChart
              title={t('projects:burndown.title')}
              data={data}
              emptyLabel={t('projects:burndown.empty')}
              seriesLabels={{
                ideal: t('projects:burndown.ideal'),
                actual: t('projects:burndown.actual'),
                remaining: t('projects:burndown.remaining'),
              }}
            />
          )}
        </PageSection>
      )}
    </ProjectPageShell>
  );
};

export default ProjectBurndownPage;