import { __ } from '@wordpress/i18n';
import { useTourStore } from '@assist/state/Tours';
import tours from '@assist/tours/tours';

export const TourButton = ({ task }) => {
	const { startTour, wasOpened } = useTourStore();

	if (!tours[task.slug]) return null;

	const getButtonText = () => {
		const { buttonTextDone, buttonTextToDo } = task;
		if (wasOpened(task.slug)) {
			return buttonTextDone ?? __('Restart Tour', 'extendify-local');
		}
		return buttonTextToDo ?? __('Start Tour', 'extendify-local');
	};

	return (
		<button
			className="px-3 py-2 leading-tight min-w-20 sm:min-w-30 button-focus bg-gray-100 hover:bg-gray-200 focus:shadow-button text-gray-900 rounded-sm relative z-10 cursor-pointer text-center no-underline text-sm"
			type="button"
			onClick={() => startTour(tours[task.slug])}>
			{getButtonText()}
		</button>
	);
};
