import React, {FC} from "react";
import {Button} from "./Button";
import {__} from "../../globals";

export type NoAdvancedGetYItemsSelectedProps = {
    onTestablesOpen: () => void;
}

export const NoAdvancedGetYItemsSelected: FC<NoAdvancedGetYItemsSelectedProps> = ({onTestablesOpen}) => {
    return <div
        className="flex flex-col items-center px-4 py-5  text-center space-y-4">
        <h1 className="text-3x text-gray-700">Advanced product combinations</h1>
        <div className="text-smaller-1 text-gray-500 space-y-2">
            <p>Select advanced product filters like in categories
                excluding subcategories or specific products and with specific attributes, restrict by item price
                like
                items that are $99 or bellow, and more.</p>
            <p>Combine eligible product groups, like Product A or B, or products in Categories C or D.</p>
        </div>
        <Button preset="blue" size={'medium'} onClick={onTestablesOpen}>
            <div className="flex items-center justify-center gap-1 w-full">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-4 min-h-4 max-w-4 max-h-4">
                    <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z" clipRule="evenodd" />
                </svg>
                <span>{__('Add group to discount')}</span></div>
        </Button>
    </div>
}