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

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

export function FeatureActions({
  feature,
  isPinned,
  onTogglePin,
  onShowInfo,
  onRemove,
  onAdd,
}: FeatureActionsProps) {
  return (
    <div className="flex items-center gap-0.5 shrink-0">
      {feature.detail && onShowInfo && (
        <IconButton onClick={() => onShowInfo(feature)} title="Feature info" size="md">
          <InfoIcon className="w-5 h-5 md:w-3.5 md:h-3.5" />
        </IconButton>
      )}
      <IconButton
        onClick={() => onTogglePin(feature.name)}
        title={isPinned ? 'Unpin colour view' : 'Colour map by this feature'}
        active={isPinned}
        size="md"
      >
        <EyeIcon filled={isPinned} className="w-5 h-5 md:w-3.5 md:h-3.5" />
      </IconButton>
      {onAdd && (
        <button
          onClick={() => onAdd(feature.name)}
          title="Add filter"
          className="p-1 rounded-md text-teal-600 dark:text-teal-400 bg-teal-50 dark:bg-teal-900/30 hover:bg-teal-100 dark:hover:bg-teal-800/40"
        >
          <PlusIcon className="w-5 h-5 md:w-5 md:h-5" strokeWidth={2.5} />
        </button>
      )}
      {onRemove && (
        <IconButton onClick={() => onRemove(feature.name)} title="Remove filter">
          <CloseIcon className="w-3.5 h-3.5" />
        </IconButton>
      )}
    </div>
  );
}