import { useTranslation } from 'react-i18next';
import type { FeatureMeta } from '../../types';
import { EyeIcon, InfoIcon, PlusIcon, CloseIcon } from './icons';
import { IconButton } from './IconButton';

interface FeatureActionsProps {
  feature: FeatureMeta;
  actionName?: string;
  isPinned: boolean;
  isPreviewing?: boolean;
  onTogglePin: (name: string) => void;
  onShowInfo?: (feature: FeatureMeta) => void;
  onRemove?: (name: string) => void;
  onAdd?: (name: string) => void;
  showText?: boolean;
}

export function FeatureActions({
  feature,
  actionName,
  isPinned,
  isPreviewing = false,
  onTogglePin,
  onShowInfo,
  onRemove,
  onAdd,
  showText = false,
}: FeatureActionsProps) {
  const { t } = useTranslation();
  const isEyeActive = isPinned || isPreviewing;
  const callbackName = actionName ?? feature.name;
  const mapLabel = isPinned ? t('filters.clearColourMap') : t('filters.colourMap');

  return (
    <div className="flex items-center gap-2 md:gap-0.5 shrink-0">
      {feature.detail &&
        onShowInfo &&
        (showText ? (
          <IconButton onClick={() => onShowInfo(feature)} title={t('filters.aboutData')} size="md">
            <InfoIcon className="w-4 h-4" />
          </IconButton>
        ) : (
          <IconButton onClick={() => onShowInfo(feature)} title={t('filters.aboutData')} size="md">
            <InfoIcon className="w-5 h-5 md:w-3.5 md:h-3.5" />
          </IconButton>
        ))}
      {showText ? (
        <IconButton
          onClick={() => onTogglePin(callbackName)}
          title={mapLabel}
          active={isEyeActive}
          size="md"
        >
          <EyeIcon filled={isEyeActive} className="w-4 h-4" />
        </IconButton>
      ) : (
        <IconButton
          onClick={() => onTogglePin(callbackName)}
          title={mapLabel}
          active={isEyeActive}
          size="md"
        >
          <EyeIcon filled={isEyeActive} className="w-5 h-5 md:w-3.5 md:h-3.5" />
        </IconButton>
      )}
      {onAdd && (
        <button
          type="button"
          onClick={() => onAdd(callbackName)}
          title={t('filters.addFilterLabel')}
          aria-label={t('filters.addFilterLabel')}
          className="inline-flex items-center gap-1 rounded-md bg-teal-50 px-2 py-1 text-xs font-semibold text-teal-700 hover:bg-teal-100 dark:bg-teal-900/30 dark:text-teal-300 dark:hover:bg-teal-800/40"
        >
          <PlusIcon className="w-4 h-4" strokeWidth={2.5} />
          <span>{t('filters.addFilterAction')}</span>
        </button>
      )}
      {onRemove && (
        <IconButton onClick={() => onRemove(callbackName)} title={t('filters.removeFilter')}>
          <CloseIcon className="w-3.5 h-3.5" />
        </IconButton>
      )}
    </div>
  );
}
