import React from 'react';

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

import { cn } from '@/lib/utils';

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

interface ProgramsDropdownProps {
  hasAllOption?: boolean;
  basePath: string;
  posRight?: boolean;
  onItemClick?: () => void;
}

const ProgramsDropdown: React.FC<ProgramsDropdownProps> = ({
  hasAllOption,
  posRight,
  onItemClick,
}) => {
  const t = useTranslations('navigation.programsDropdown');
  const locale = useLocale();

  const visibleItems = programsMenuItems.filter(
    (item) => !item.visibleLocales || item.visibleLocales.includes(locale)
  );

  const handleLinkClick = () => {
    onItemClick?.();
  };

  return (
    <div
      className={cn(
        'absolute top-full left-0 bg-white border border-black/10 shadow-lg rounded-none z-20 min-w-max',
        posRight && 'right-0 left-auto'
      )}
    >
      {visibleItems.map((category, index) => {
        const Icon = category.icon;
        return (
          <Link
            className={cn(
              'transition flex flex-row items-center gap-2 sm:gap-2.5 p-1.5 sm:p-2 group text-[#151720]/70 border-l-2 border-transparent hover:text-[#151720] hover:bg-[#f5f2e8] hover:border-[#151720]/40',
              index === 0 && !hasAllOption ? '' : 'border-t border-black/10'
            )}
            key={category.key}
            href={`/${category.prettyKey}` as never}
            onClick={handleLinkClick}
          >
            <Icon
              size={24}
              className="flex-shrink-0 text-[#151720]/60 group-hover:text-[#151720]"
            />

            <div className="font-roboto text-[11px] sm:text-xs lg:text-sm text-left uppercase tracking-wide">
              {t(category.labelKey)}
            </div>
          </Link>
        );
      })}
    </div>
  );
};

export default ProgramsDropdown;