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

export type FloatingMarkerProps = {
    prefix?: string,
    label: string,
    paddingRight?: string
}

export const FloatingMarker: FC<FloatingMarkerProps> = ({prefix, label, paddingRight}) => {
    return <div className="absolute -top-9 left-1/2 -translate-x-1/2 --left-28 w-[calc(100%+12px)] flex flex-col items-center juctify-center gap-1">
        <div className={classNames("w-1/2 self-start justify-end flex items-end", {
            'pr-3': !paddingRight,
            [paddingRight! || '--default-pr']: paddingRight
        })}>
            <span className="text-gray-350 text-base font-medium inline-flex items-start gap-1 px-2 py-[2px] rounded-3 bg-gray-150 bg-opacity-60">
                {prefix && <span className={'opacity-50'}>{prefix}:</span>}
                <span>{label}</span>
            </span>
        </div>
        {false && <div className="relative w-full h-3 rounded-t-[24px] border-[1px] border-b-0 border-gray-150 opacity-70">
        </div>}
    </div>

/*
    return <div className="absolute -left-28 h-full flex items-center">
                <span className="text-gray-350 text-base font-medium mr-2 flex items-center gap-1">
                    {prefix && <span className={'opacity-50'}>{prefix}:</span>}
                    <span>{label}</span>
                </span>
        <div className="relative h-full w-6">
            <div className="absolute left-0 top-0 w-2 h-8 border-l-2 border-t-2 border-gray-150 rounded-tl-2 "></div>
            <div className="absolute left-0 top-6 bottom-6 w-0 border-l-2 border-gray-150"></div>
            <div className="absolute left-0 bottom-0 w-2 h-8 border-l-2 border-b-2 border-gray-150 rounded-bl-2"></div>
        </div>
    </div>
*/

}