import { Button } from '@/components/ui/button';
import { ActionButtonsProps } from '@/src/types/common';

export function ActionButtons({ actions }: ActionButtonsProps) {
  return (
    <div className="mt-2 flex gap-2 flex-wrap">
      {actions.map((action) => (
        <Button
          key={crypto.randomUUID()}
          variant="light-outline"
          size="sm"
          onClick={action.onClick}
          disabled={action.disabled}
          className="relative"
        >
          {action.icon}
          {action.text}

          {typeof action.notificationCount === 'number' && action.notificationCount > 0 && (
            <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4">
              {action.notificationCount}
            </span>
          )}
        </Button>
      ))}
    </div>
  );
}
