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

export const SuggestedWrapper: FC<{ show: boolean, children: React.ReactNode, label?: string, className?: string }> = ({
                                                                                                       show,
                                                                                                       children,
                                                                                                       label,
                                                                                                       className
                                                                                                   }) => {
    if (!show) return <>{children}</>;

    return <div className={""}>
        {children}
    </div>;

    return (
        <div className="relative inline-flex flex-col">
            <style>{`
                @keyframes gradient-slide {
                    from {
                        background-position: 100% 0;
                    }
                    to {
                        background-position: -100% 0;
                    }
                }
                .suggested-label {
                    background: linear-gradient(
                        105deg,
                        #dcddf2 0%,
                        #dcddf2 35%,
                        #eeeef9 45%,
                        #eeeef9 55%,
                        #dcddf2 65%,
                        #dcddf2 100%
                    );
                    background-size: 200% 100%;
                    animation: gradient-slide 3s linear infinite;
                    backdrop-filter: blur(8px);
                    -webkit-backdrop-filter: blur(8px);
                }
                .suggested-halo {
                    position: relative;
                    background: rgba(255, 255, 255, 0.7);
                    backdrop-filter: blur(8px);
                    -webkit-backdrop-filter: blur(8px);
                }
                .suggested-halo::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    padding: 1px;
                    border-radius: 0 0 20px 20px;
                    background: linear-gradient(
                        105deg,
                        #cbccec 0%,
                        #cbccec 35%,
                        #eeeef9 45%,
                        #eeeef9 55%,
                        #cbccec 65%,
                        #cbccec 100%
                    );
                    background-size: 200% 100%;
                    animation: gradient-slide 3s linear infinite;
                    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
                    -webkit-mask-composite: xor;
                    mask-composite: exclude;
                    pointer-events: none;
                }
            `}</style>
            <div className="suggested-label text-purple-normal text-smaller-2 whitespace-nowrap px-[10px] py-[1px] rounded-t-2 self-center z-10 w-full text-center">
                {label || __('Suggested')}
            </div>
            <div className={cn('suggested-halo rounded-b-1 py-1 px-1 -mt-px', className)}>
                {children}
            </div>
        </div>
    );
};