import React, {FC} from "react";
import {__} from "../../globals";
import {Button} from "./Button";
import {request} from "../Color";
import {color} from "motion";
import {useSetAtom} from "jotai";
import {BuyXGetYSpecificProductWindowStateAtom, GetYProductDataToSave} from "../atoms";
import {GetYAddProductToDiscountButton} from "./GetYAddProductToDiscountButton";

export type BuyXGetYNoProductsDataProps = { onSuccess: (newData: GetYProductDataToSave) => void }

export const BuyXGetYNoProductsData: FC<BuyXGetYNoProductsDataProps> = ({onSuccess}) => {
    return <div className="space-y-2">
        <div
            className={"flex flex-col items-center gap-3 rounded-1 --border-[2px] border-gray-150 px-4 py-5 text-center"}>
            <div className="flex flex-col items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                     stroke="currentColor" className="min-w-10 min-h-10 max-w-10 max-h-10">
                    <path strokeLinecap="round" strokeLinejoin="round"
                          d="M21 11.25v8.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 1 0 9.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1 1 14.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"/>
                </svg>
                <h1 className="text-3x text-gray-800">{__('Reward your Customers with Gfts')}</h1>
                <p className="text-base text-gray-350 leading-4">{__('Select specific products to discount. You can add as many as you need.')}</p>
            </div>
            <GetYAddProductToDiscountButton onSuccess={onSuccess} primary={true}/>
        </div>
    </div>
}
