import React from 'react';

import { useTranslations } from 'next-intl';
import Image from 'next/image';

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

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

interface CategoryDropdownProps {
  hasAllOption?: boolean;
  basePath: '/alkotok' | '/alkotasok' | '/videok';
  posRight?: boolean;
  onItemClick?: () => void;
}

const CategoryDropdown: React.FC<CategoryDropdownProps> = ({
  hasAllOption,
  basePath,
  posRight,
  onItemClick,
}) => {
  const t = useTranslations('categories');
  const tNavigation = useTranslations('navigation');
  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'
      )}
    >
      {hasAllOption && (
        <Link
          className="text-[#151720]/70 hover:text-[#151720] transition flex flex-row items-center gap-2 sm:gap-2.5 p-1.5 sm:p-2 border-l-2 border-transparent hover:bg-[#f5f2e8] hover:border-[#151720]/40"
          href={basePath}
          onClick={handleLinkClick}
        >
          <div className="font-slab font-medium text-[11px] sm:text-xs lg:text-sm uppercase">
            {basePath.includes('videok')
              ? tNavigation('categoryDropdown.allVideos')
              : tNavigation('categoryDropdown.everyone')}
          </div>
        </Link>
      )}

      {metaAttributes110.map((category, index) => (
        <Link
          className={cn(
            'text-[#151720]/70 hover:text-[#151720] transition flex flex-row items-center gap-2 sm:gap-2.5 p-1.5 sm:p-2 border-l-2 border-transparent hover:bg-[#f5f2e8] hover:border-[#151720]/40',
            index === 0 && !hasAllOption ? '' : 'border-t border-black/10'
          )}
          key={category.key}
          href={`${basePath}/${category.prettyKey}` as never}
          onClick={handleLinkClick}
        >
          <Image
            className="aspect-square"
            src={`/assets/images/icons/light/${category.icon}`}
            alt={t(category.labelKey)}
            width={24}
            height={24}
          />

          <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 CategoryDropdown;