import { getLocale } from 'next-intl/server';

import { getCreationList } from '@/services/creations';

import TimelineWithSlider from '@/components/timeline/TimelineWithSlider';

import { CreationListItem } from '@/types/Creation';

export default async function CreationsSection({ creatorId }: { creatorId: string }) {
  const locale = await getLocale();
  const creations = await getCreationList({
    personIdentifierList: [creatorId],
  });

  const years = creations
    .map((c: CreationListItem) => c.labelYear)
    .filter((year: number | null): year is number => typeof year === 'number' && year !== 1000);

  const maxYear = years.length > 0 ? Math.max(...years) : new Date().getFullYear();
  const minYear = years.length > 0 ? Math.min(...years) : maxYear - 100;

  const availableYears: number[] = [...new Set<number>(years)].sort((a, b) => b - a);

  return (
    <div className="flex flex-col gap-3">
      {locale === 'en' && (
        <p className="text-xs lg:text-md lg:text-base text-red-500 font-medium">
          Note: most works are available only in their original language.
        </p>
      )}
      <TimelineWithSlider
        min={minYear}
        max={maxYear}
        initialYear={maxYear}
        availableYears={availableYears}
        data={creations}
        lineColor="yellow"
      />
    </div>
  );
}