'use client';

import React from 'react';

import { useTranslations } from 'next-intl';
import { useLocale } from 'next-intl';

import { IoArrowForward } from 'react-icons/io5';

import Timeline from '@/components/timeline/Timeline';
import { cn } from '@/lib/utils';

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

import { Link } from '@/i18n/navigation';

interface FeaturedCreationsBlockProps {
  leftTitle: string;
  creations: CreationListItem[];
  creatorId: string;
  hasOtherCreationsButtons?: boolean;
}

const FeaturedCreationsBlock: React.FC<FeaturedCreationsBlockProps> = ({
  creations,
  creatorId,
  leftTitle,
  hasOtherCreationsButtons = true,
}) => {
  const t = useTranslations('creatorPage');
  const locale = useLocale();
  // Ensure featuredCreations is always an array
  const safeFeaturedCreations = Array.isArray(creations) ? creations : [];

  return (
    <div className="flex flex-col">
      <div
        className={cn(
          'w-full flex flex-col md:flex-row md:items-center sm:justify-between gap-2 md:gap-0'
        )}
      >
        <h3 className="text-mma-blue text-sm md:text-base uppercase font-bold">{leftTitle}</h3>

        {hasOtherCreationsButtons && locale === 'hu' && (
          <Link
            href={{
              pathname: '/alkoto/[id]/alkotasok',
              params: { id: creatorId },
            }}
            className="hidden lg:flex items-center gap-2 text-mma-blue text-sm md:text-base uppercase font-bold hover:underline hover:text-mma-yellow transition-colors underline w-fit"
          >
            {t('sections.moreCreations')}
            <IoArrowForward className="text-sm md:text-md" />
          </Link>
        )}
      </div>

      {safeFeaturedCreations.length > 0 ? (
        <Timeline data={safeFeaturedCreations} />
      ) : (
        <div className="px-site py-8 text-center text-mma-blue font-semibold">
          <p className="p-16">{t('profile.noData')}</p>
        </div>
      )}

      {hasOtherCreationsButtons && locale === 'hu' && safeFeaturedCreations.length > 0 && (
        <Link
          href={{
            pathname: '/alkoto/[id]/alkotasok',
            params: { id: creatorId },
          }}
          className="mx-auto flex items-center gap-2 text-mma-blue text-sm md:text-base uppercase font-bold hover:underline hover:text-mma-yellow transition-colors underline w-fit"
        >
          {t('sections.moreCreations')}
          <IoArrowForward className="text-sm md:text-md" />
        </Link>
      )}
    </div>
  );
};

export default FeaturedCreationsBlock;