import React, {FC} from "react";
import classNames from "classnames";
import {ColorOptionWithCustomTint, request} from "./Color";

export type VerticalOrConnectorProps = ColorOptionWithCustomTint & {
    label: string,
}

export const VerticalOrConnector: FC<VerticalOrConnectorProps> = ({color, label}) => {
    return <div className="relative flex justify-center -my-1">
        <div className={classNames(
            `w-px h-9 opacity-40`,
            request(color, 'or-connector.line').get('background.dark'),
        )}></div>
        <span className={classNames(
            'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full px-2 py-[2px] text-smaller-2 font-semibold border-px whitespace-nowrap',
            request(color, 'or-connector.pill').background(100),
            request(color, 'or-connector.pill').text(10),
            request(color, 'or-connector.pill').border(40),
        )}>
            {label}
        </span>
    </div>
}